typed.js的正确使用

前言

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

typed.js详情

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

传送门：官网 、GitHub

简单使用

<!-- 核心代码 --><span id="typed"></span><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, it will pause for three seconds. ^3000',            "Second test, the last sentence will go back to 'Second test, ', oh 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方法

结语

非常感谢各位的阅读