今天在Github上发现了一个有趣的开源项目

img

导入js

1
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/typed.js/2.0.12/typed.min.js"></script>

实现效果

img

1
2
3
4
5
6
7
8
9
10
11
12
13

try {
var typed = new Typed("#typed", {
strings: ['醒亦念卿,梦亦念卿','频繁记录,只因生活和你太值得❤'],//字符串
startDelay: 0,//开始的延迟
typeSpeed: 200,//打字速度
backSpeed: 100,//回退速度
loop: true,//是否循环
showCursor: true,//显示游标
shuffle: false//是否随机
});
} catch (err) {
}

游标样式

img

1
2
3
4
5
6
7
8

try {
var typed1 = new Typed("#typed1", {
//一大堆同上
cursorChar: '_',//游标样式
});
} catch (err) {
}

批量输入

img

1
2
3
4
5
6
7
8

try {
var typed2 = new Typed("#typed2", {
strings: ['醒亦念卿,梦亦念卿\n `频繁记录,只因生活和你太值得❤`'],//字符串
//一大堆同上
});
} catch (err) {
}

智能退格

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div style="text-align:center;font-size:2rem;">
<strong id="typed3"></strong>

</div>
<script data-pjax>
try {
var typed3 = new Typed("#typed3", {
strings: ['我想说:我','我想说:爱','我想说:你'],//字符串
startDelay: 0,//开始的延迟
typeSpeed: 200,//打字速度
backSpeed: 100,//回退速度
loop: true,//是否循环
showCursor: true,//显示游标
smartBackspace: true, //默认true
});
} catch (err) {
}
</script>