简单入门
Typed.js是一个流行的JS库，用于在网页上模拟打字机效果。
博客的首页就采用了这个动态库，这段配置是博客首页用于Typed.js库的初始化配置。
{
"backSpeed": 50,
"loop": false,
"showCursor": true,
"strings": [
"愿你保持不变 保持己见 充满热血"
],
"typeSpeed": 140
}
参数详解
| 属性名 | 类型 | 作用描述 |
|---|---|---|
strings | Array | 内容源： 定义要显示的文本内容。此处为单条语句，库会按顺序逐字符打印数组中的字符串。 |
typeSpeed | Number | 打字速度： 单位为毫秒（ms），数值越大，打字速度越慢。140 表示每输入一个字符间隔 140 毫秒。 |
backSpeed | Number | 退格速度： 删除文字的速度。虽然在本配置中未开启循环，但若触发删除动作，速度将为 50ms/字符。 |
loop | Boolean | 是否循环： 设置为 false 表示动画播放一次后即停止，不会回到开头重新开始。 |
showCursor | Boolean | 显示光标： 设置为 true 会在文本末尾显示一个闪烁的竖线（模拟输入光标），增加视觉上的真实感。 |
对应效果预览
配置生效后，页面会呈现如下动态过程：
愿 |
愿你 |
愿你保 |
…
愿你保持不变 保持己见 充满热血 | （停止，光标闪烁）
代码实现参考
若要在项目中应用此配置，标准的初始化方式如下：
var typed = new Typed('#element', {
strings: ["愿你保持不变 保持己见 充满热血"],
typeSpeed: 140,
backSpeed: 50,
loop: false,
showCursor: true
});
功能详解
核心内容与速度控制
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
strings | Array | [''] | 包含所有要打印的字符串数组。 |
stringsElement | String | null | 指定 HTML 元素的 ID，从中提取文字（利于 SEO）。 |
typeSpeed | Number | 0 | 打字速度（毫秒/字符）。 |
startDelay | Number | 0 | 动画开始前的延迟时间。 |
backSpeed | Number | 0 | 退格（删除）的速度。 |
backDelay | Number | 700 | 打完一段字后，开始删除前的停顿时间。 |
循环与行为逻辑
控制动画的重复方式和特殊逻辑。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
loop | Boolean | false | 是否循环播放。 |
loopCount | Number | Infinity | 循环次数（Infinity 为无限）。 |
showCursor | Boolean | true | 是否显示闪烁的光标。 |
fadeOut | Boolean | false | 用淡出效果代替退格删除。 |
fadeOutClass | String | typed-fade-out | 淡出效果的 CSS 类名。 |
smartBackspace | Boolean | true | 智能退格：如果两句话开头相同，只删除不同的部分。 |
高级交互
如果你需要在输入框或特定位置使用：
attr: 默认为null。如果你想在HTML属性中打字（例如
placeholder），可以设置attr: 'placeholder'。
contentType: 默认为'html'。可以设置为
'null'，标识为纯文本，如果设为'html'，字符串中的或<strong>标签会被正确解析。
生命周期回调函数
这些函数允许你在特定时间点执行自定义 JavaSript 代码：
-
onBegin(self) : 动画开始前触发。 -
onComplete(self) : 所有打字任务完成后触发。 -
preStringTyped(arrayPos, self) : 在开始打印每一条字符串之前触发。 -
onStringTyped(arrayPos, self) : 在每一条字符串打印完成后触发。 -
onLastStringBackspaced(self) : 在最后一条字符串退格完成后触发。 -
onTypingPaused(arrayPos, self) : 暂停时触发。 -
onTypingResumed(arrayPos, self) : 恢复播放时触发。
进阶配置
如果你想做一个智能的、带循环的打字效果，可以参考以下写法：
var typed = new Typed('#element', {
strings: [
'欢迎来到我的网站',
'我擅长 Java 开发',
'我擅长 SpringBoot 架构'
],
typeSpeed: 60,
backSpeed: 30,
smartBackspace: true, // 打印第三句时，不会删除“我擅长 ”这四个字
backDelay: 2000, // 打完后等2秒再删
loop: true,
cursorChar: '_', // 将光标改为下划线
contentType: 'html' // 支持解析 HTML 标签
});
Comments NOTHING