typed.js使用手册 - Pinpe的云端

这是什么？#

这是一种前端库，用来实现逐字打印和光标闪烁的效果：

var typed = new Typed('#typed', {
    strings: ["这是效果演示", "这里消费不高，交通方便，工资也不错，自然而然成为了我的打工首选地。而且，我租的房子附近就有还算四通八达的地铁，到达市中心只需要 15 分钟。于是，我便在这里安顿了下来。"],
    typeSpeed: 60,
    showCursor: true,
    cursorChar: "  _",
    loop:true,
    backSpeed:60,
    backDelay:2000,
    startDelay:500
});

而代码只需要这么写：

怎么导入？#

只需在<head>标签里插入如下脚本：

例如：

需要注意的是，jsdelivr在国内可能无法使用，这时就需要换成其它的CDN或镜像。

怎么使用？#

Step1：创建容器#

先创建一个<span>元素，再设置一个id，例如#typed（也可以改成其它的id），元素内不用写任何东西：

如果要选择别的元素当容器（例如<p>），不要直接上手改，只能往外套一层：

现在，整个代码应该是这样的：

Step2：创建对象#

将以下代码复制到容器下面：

例如：

<html> <head> <meta charset=“UTF-8”> <script src=“https://cdn.jsdelivr.net/npm/typed.js@2.0.9”></script> </head> <body> <p><span id=“typed”></span></p> <script> var typed = new Typed(‘#typed’, { … }); </script> </body> </html>

Step3：填写参数#

在…处填写参数，语法是：

参数名: 参数值,

如果是最后一个参数，则不需要加“,”号。

感谢tabzzz提供的参数列表：

参数作用取值类型（仅供参考）strings（必选）要打印的文字由字符串组成的数组typeSpeed（必选）打字速度（毫秒）整型startDelay打字开始前的延迟时间（毫秒）整型backSpeed删除速度（毫秒）整型smartBackspace智能删除，仅删除与前一个字符串不匹配的字符布尔值（true或false）shuffle字符串数组随机排序布尔值（true或false）backDelay后退延迟，即打字和删除之间的延迟时间（毫秒）整型fadeOut是否淡出而不是删除布尔值（true或false）loop是否循环播放文字布尔值（true或false）loopCount循环次数整型，Infinity为无限循环showCursor是否显示光标布尔值（true或false）cursorChar光标字符字符串autoInsertCss是否自动插入 CSS 为光标和淡出效果布尔值（true或false）

例如：