typed.js的正确使用

前言

本文首发于笔者博客，笔者在今天下午偶然看到一个博主的博客内有段文字是以打字机的效果进行显示的，然后找到了typed.js，在使用的过程中出现了不显示设置的第一句话的错误，找到原因后在此记录一下

typed.js介绍

typed.js是一个类型化库，效果是用打字机的方式显示一段话，可以自定义任何字符串、指定显示速度、指定是否循环等

传送门：官网 、GitHub

简单使用

<!-- 核心代码 -->

<span id="typed" style="white-space: pre-wrap;line-height: 30px;"></span>

<!-- 在span标签内加入 white-space: pre-wrap 样式，在strings内的语句中加入\n换行符可以实现换行 -->

<script src="https://cdn.bootcss.com/typed.js/2.0.9/typed.min.js"></script>
<script type="text/javascript">
    var options = {
        strings: [
            'First test.',
            'Second test, \nit will pause for three seconds. ^3000',
            "Second test, \nthe last sentence will go back to 'Second test, ', \noh no, this is the third test. ^1000",
            "It's going to start repeating."
        ],
        typeSpeed: 50,   //打印速度
        startDelay: 300, //开始之前的延迟300毫秒
        loop: true,      //是否循环
    };
    var typed = new Typed('#typed', options);
</script>

效果图

效果图

更多设置请查看官方文档或者自行搜索

遇到的问题

在第一次使用过程中，由于本人写代码的习惯，把<span>标签拆成两行写了，这就导致在strings数组内的第一个元素，也就是第一句话无法显示，直接显示第二句话

<span id="typed"></span>    <!-- 正确写法 -->

<span id="typed">
</span>                     <!-- 错误写法，这将导致第一句话无法显示 -->

此外，typed.js 的v2.0.0之前需要提前引用JQuery，从v2.0.0开始不再依赖JQuery，相应的，不能使用其JQuery方法

结语

非常感谢各位的阅读