【前端库】typed.js 打字机效果
官方github
官方网站：
bootstrap CDN
案例地方单击我看效果
前提
引入js库
手册
官方手册
new Typed()
使用new实例化
new Typed('参数一','参数二');
| Typed参数 | 参数说明 |
|---|---|
| 参数一 | obj类型，元素对象，将文字放入元素内，进行看效果，注意：如果是div的话，块级标签，最好转换为内联，display: inline; |
| 参数二 | json类型，参数如下： |
| Typed参数二的参数 | 参数说明 |
|---|---|
| strings | 数组类型,里面存放文本内容，输出的文本。从下标0开始，打印第一个，从新覆盖，打印出第二个。注意：输出标签时，在input会直接输出标签，如果在一个div内，会当标签执行掉 |
| stringsElement | 不知道是啥，官方没有给答案 |
| typeSpeed | number类型，打印的速度。数值越大，速度越慢。 |
| startDelay | number类型，前面延迟时间（不用写单位，默认是ms毫秒） |
| backSpeed | number 类型，往后退（跟删除差不多，相当于我们按backSpace键，不是删除，而是退后。del键是删除），打印第一段后，便后退速度多少秒。单位毫秒。 |
| shuffle | boolean类型，不知道是啥 |
| smartBackspace | boolean类型，不知道是啥 |
| backDelay | number类型，当要后退的时候，延迟时间后才后退，值越大，延迟的时间就越长。 |
| fadeOut | boolean类型，开启运动效果，和下面的fadeOutClass和fadeOutDelay才能看出效果 |
| fadeOutClass | string 类型，比如：'typed-fade-out’值 |
| fadeOutDelay | number 类型，设置淡出为毫秒为单位。 |
| loop | boolean布尔类型，设置循环，为真，开启循环。和下面loopCount一起使用，才能弄出效果 |
| loopCount | 设置循环次数，值为：Infinity（不是字符串，直接粘贴过去使用）时, 便会无限循环。也可以使用数值 |
| showCursor | boolean类型，默认开启光标，为真开启，那么还得设置css将元素设置为内联元素即可。 |
| cursorChar | string类型，光标的符号，比如：’^’ |
| autoInsertCss | true 类型，将光标插入到html中 |
| attr | string类型， 可以将文本输入到输入框placeholder属性中，也可以输入框的value值里面，还可以输入到html文本（值就是null默认），最后还有可以自定义个html属性中显示打印效果（可以在控制台中显示） |
| bindInputFocusEvents | boolean类型，为真，在输入框中，如果是打印的时候，把光标进入焦点后，则停止打印。默认是为假，进入输入框焦点则不停止打印。 |
| contentType | string类型，有两个参数：‘html’或者’null’，默认是html，值为html时，将打印的文本标签直接解析html标签。如果是’null’则，将直接输出标签字符串。 |
| onComplete | function 类型，当打印完成后，执行回调函数，接收一个参数是全局对象，里面有很多设置方法属性。 |
| preStringTyped | function 类型，在字符串打印出来之前，回调函数。接收两个参数，第一个是arrayPos的值，第二个是全局对象，和上面一样。 |
| onStringTyped | function 类型，在打印输出字符串之后。接收两个参数，参数一：是arrayPos值。参数二：全局对象，和上面一样 没成功 |
| onLastStringBackspaced | function类型，在循环打印输出到最后一个字符串之后触发回调函数。所以这里必须得设置循环属性才可以。没成功 |
| onTypingPaused | function类型，打印停止才会触发。当onStop()实现停止了后才触发。 |
| onTypingResumed | function 类型，打字在停止后才开始触发。当onStop()实现停止了后才触发。 |
| reset() | 方法，重置后。可以通过实例化后的对象，进行调用此方法 |
| stop() | 方法，停止。可以通过实例化后的对象，可以通过实例化后的对象，进行调用此方法 |
| start() | 方法，开始。可以通过实例化后的对象，可以通过实例化后的对象，进行调用此方法 |
| toggle() | 方法，用于切换onStop与onStart之间。可以通过实例化后的对象，进行调用此方法 |
| destroy() | 方法，如果是不在使用此对象，那么可以使用这个方法销毁实例对象。并没有删除实例化对象，实际功能是销毁当前的对象内容 ，但是也不算是销毁，还能单击开始，有点像是重置 |
设置光标闪动，必须得加上css样式，还得在js里面将打印出来的文字内添加 ^1000
.typed-cursor{
opacity: 1;
animation: typedjsBlink 0.7s infinite;
-webkit-animation: typedjsBlink 0.7s infinite;
animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink{
50% { opacity: 0.0; }
}
@-webkit-keyframes typedjsBlink{
0% { opacity: 1; }
50% { opacity: 0.0; }
100% { opacity: 1; }
}
.typed-fade-out{
opacity: 0;
transition: opacity .25s;
-webkit-animation: 0;
animation: 0;
}
光标闪烁的实例
<style>
.typed-cursor{
opacity: 1;
animation: typedjsBlink 0.7s infinite;
-webkit-animation: typedjsBlink 0.7s infinite;
animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink{
50% { opacity: 0.0; }
}
@-webkit-keyframes typedjsBlink{
0% { opacity: 1; }
50% { opacity: 0.0; }
100% { opacity: 1; }
}
.typed-fade-out{
opacity: 0;
transition: opacity .25s;
-webkit-animation: 0;
animation: 0;
}
style>
<div id="element">div>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js">script>
<script type="text/javascript">
var options = {
// 闪烁光标必须得有：上面的css和下面字符串内添加 ^1000 ，只要是当输入到^1000就解析闪烁的时间，1000ms。
strings: ["我是第一段哦哦哦 ^1000 哦！", "我是第二段",'我是第三段'],
typeSpeed: 40
}
var typed = new Typed("#element", options);
script>
strings 与 typeSpeed
<div id="element">div>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js">script>
<script type="text/javascript">
var options = {
//
strings: ["我是第一段哦哦哦哦！", "我是第二段",'我是第三段'],
typeSpeed: 40
}
var typed = new Typed("#element", options);
script>
startDelay 运行后，延迟多少毫秒在开始出效果
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
#text,#element {
width: 100%;
display: block;
}
style>
head>
<body>
<div id="element">div>
<input type="text" id="text" name="">
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js">script>
<script type="text/javascript">
var options = {
strings: ["下面的还没出来
哦！", "我都第二段了",'我不延时我不延时我不延时我不延时我不延时'],
typeSpeed: 80,
startDelay: 1000 // 延时一秒后在执行
}
var option = {
strings: ["我是第一段
！", "我是第二段",'我延时，我延时，我延时，我延时，我延时，我延时，我延时，我延时，我延时，'],
typeSpeed: 80
}
// console.log(new start());
var typed = new Typed("#text", options);
var typed = new Typed("#element", option);
script>
body>
html>
contentType 设置标签解析
<span id="element1">span>
<span id="element2">span>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js">script>
<script type="text/javascript">
var options = {
strings: ["我是H2标签
！", "'],
typeSpeed: 80,
contentType : 'null' // 将标签
}
var typed = new Typed("#element1", options);
var option = {
strings: ["我是H2标签
！", "],
typeSpeed: 80,
contentType : 'null' // 将标签
}
var typed = new Typed("#element2", option);
script>
调用 toggle()、start()、stop()、reset()
<span id="element">span>
<br />
<button id="btn1">开始打印button>
<button id="btn2">暂停打印button>
<button id="btn3">暂停或者开始button>
<button id="btn4">重置button>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js">script>
<script type="text/javascript">
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
var btn4 = document.getElementById('btn4');
var option = {
strings: ['我是字符串内我是字符串内我是字符串内我是字符串内我是字符串内我是字符串内>'],
typeSpeed: 80,
loop:true,
loopCount:Infinity
}
var typed = new Typed("#element", option);
btn1.onclick = function () {
typed.start();
}
btn2.onclick = function () {
typed.stop();
}
btn3.onclick = function () {
typed.toggle();
}
btn4.onclick = function () {
typed.reset();
}
script>
由于本人不会组织语言，有不足地方或不理解地方可以说。看到了一定回复。