typed.js使用手册-工具盒子

这是什么？

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

{#typed}

而代码只需要这么写：

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

怎么导入？

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

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

例如：

<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
    </head>
    <body>
         ...
    </body>
</html>

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

怎么使用？

Step1：创建容器

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

<span id="typed"></span>

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

<p><span id="typed"></span></p>

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

<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>
    </body>
</html>

Step2：创建对象

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

<script>
    var typed = new Typed('这里要改成容器的id（带"#"号）', {
        ...
    });
</script>

例如：

<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） |

例如：

<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', {
                strings: ["Hello", "World!"],
                typeSpeed: 60,
                showCursor: true
            });
        </script>
    </body>
</html>