Typed.js，一个神奇的 JavaScript 库？

最新推荐文章于 2024-12-19 10:11:54 发布

繁华落尽Owenlee

最新推荐文章于 2024-12-19 10:11:54 发布

阅读量1.8k

点赞数 2

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_41381554/article/details/134670237

版权

前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了轻量级JavaScript库Typed.js，用于实现文字打字机效果，适合前端开发者。文章详细讲解了安装步骤、基本用法（包括HTML和JavaScript示例）以及高级配置选项，旨在帮助读者提升网页互动性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

嗨，大家好，我是镇长，lee。

今天分享 Typed.js 一款让文字动起来的 JavaScript 库，特别适合那些刚刚踏入前端领域的小伙伴们。本文将为你详细介绍Typed.js，带你领略其简单易用的特性和如何在项目中应用。

https://github.com/mattboldt/typed.js/

1. Typed.js是什么？

Typed.js 是一个轻量级的JavaScript库，专为实现打字机效果而设计。它可以让你的文字一个字一个字地出现，就像是在使用打字机一样。这为网页增添了一种生动而有趣的交互方式，使用户体验更加丰富。

2. 安装Typed.js

使用Typed.js非常简单，你只需要在你的项目中引入相关的库文件。你可以通过CDN引入，也可以将其下载到本地并引入。下面是通过CDN引入的示例：

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

配合 Vite/Webpack 等构建工具一起使用，使用 npm/yarn 进行安装。

# npm 安装
npm install typed.js

# 或

# yarn 安装
yarn add typed.js

3. 基本用法

使用Typed.js，你只需在HTML文件中准备一个用于显示文字的容器，然后在JavaScript 中初始化Typed 实例。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Typed.js Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
</head>
<body>

<div id="typed-output"></div>

<script>
  var options = {
    strings: ["你好，小伙伴", "欢迎来到猿镇，我是镇长，lee", "很高兴，向你介绍 Typed.js"],
    typeSpeed: 50,
    backSpeed: 25,
    loop: true
  };

  var typed = new Typed('#typed-output', options);
</script>

</body>
</html>

在这个例子中，我们创建了一个ID为"typed-output"的div元素，用于显示Typed.js 效果。在JavaScript 中，我们定义了一些选项，比如strings 表示要显示的文字数组，typeSpeed 是打字的速度，backSpeed 是删除文字的速度，loop 表示是否循环播放。

4. 高级用法

Typed.js 提供了许多高级的配置选项，以满足更复杂的需求。你可以通过回调函数、事件监听等方式来控制文字的显示与动画效果。以下是一个使用回调函数的例子：

var options = {
  strings: ["你好，小伙伴", "欢迎来到猿镇，我是镇长，lee", "很高兴，向你介绍 Typed.js"],
  typeSpeed: 50,
  backSpeed: 25,
  onComplete: function(self) {
    console.log("动画完成");
  }
};

在这个例子中，onComplete回调函数将在所有文字都显示完毕后触发。

其他的回调函数，参考：

• onBegin: 开始打字之前
• onComplete ：所有大致执行完成
• preStringTyped：在输入每个字符串之前，第一个参数是字符串在数组中的位置。
• onStringTyped：在输入每个字符串之后，第一个参数是字符串在数组中的位置。
• onLastStringBackspaced：循环期间，在输入最后一个字符串之后。
• onTypingPaused：输入暂停时，回调
• onTypingResumed ：暂停输入后，恢复输入
• onReset：重置后回调
• onStop：停止后回调
• onStart：开始后回调
• onDestroy：销毁时回调

5. 小结

Typed.js 是一个简单而强大的JavaScript 库，通过它，你可以为你的网页文本增加生动的打字机效果。无论你是刚刚开始学习前端开发，还是想要为项目增色添彩，Typed.js都是一个值得尝试的工具。希望通过本文的介绍，你能更好地理解并运用Typed.js，为你的网页带来更加出色的用户体验。

最后

今天的分享就到这里，如果觉得对你有帮助，感谢点赞、分享、关注，你的认可是我创造的最大动力。