npm 包 typed.js 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

typed.js 是一个 JavaScript 库，能够在网页中创建打字效果。它可以用于制作动态的文本展示、标题效果等。此外，typed.js 还支持自定义光标、速度、删除等设置。

安装

使用 npm 安装 typed.js：

npm install typed.js

基本用法

在 HTML 文件中引入 typed.js 和一个占位符元素：

<script src="node_modules/typed.js/lib/typed.min.js"></script>
<span id="typed"></span>

初始化 typed.js：
```
const options = {
  strings: ['Hello, world!', 'This is a typing animation.'],
  typeSpeed: 50,
  backSpeed: 30,
};

const typed = new Typed('#typed', options);
```
上述代码将在 id 为 "typed" 的 span 元素中创建一个打字效果，文字内容为 "Hello, world!" 和 "This is a typing animation."，打字速度为 50 毫秒每个字符，删除速度为 30 毫秒每个字符。

高级用法

自定义光标

可以使用 CSS 自定义光标样式：

-- -------------------- ---- -------
------------- -
  -------- --
  ---------- ----- ---- ---------
-

---------- ----- -
  -- -
    -------- --
  -
  --- -
    -------- --
  -
  ---- -
    -------- --
  -
-

动态生成文字

可以使用 JavaScript 动态生成打字效果的文字内容：

-- -------------------- ---- -------
----- ----- - --- --------------- -
  -------- -------- -------- ----- -- - ------ -------------
  ---------- ---
  ---------- ---
  ----------- -------------- -
    ----- ---------- - -
      -------- ----- --- ---- ------ --- ---- ---------------
    --
    ---------------
    --- --------------- ------------
  --
---

上述代码定义了一个 onComplete 回调函数，在第一次打字完成后销毁当前实例并创建一个新实例，新实例的文字内容为 "You can even change the text dynamically."。

总结

typed.js 是一个方便易用的 JavaScript 库，能够帮助开发者在网页中实现打字效果。本文介绍了 typed.js 的基本用法和高级用法，并提供了示例代码。希望读者能够通过本文学会使用 typed.js 制作动态的文本展示、标题效果等，以及根据自己的需求进行定制化。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/32805