JS实现打字效果
时间：06-19来源：作者：点击数：
原生JS实现打字效果：
给 Element.prototype 设置了一个函数对象
<body>
<div id="code">我感到未尝经验的无聊，是自此以后的事。我当初是不知其所以然的；后来想，
凡有一人的主张，得了赞和，是促其前进的，得了反对，是促其奋斗的，独有叫喊于生人中，
而生人并无反应，既非赞同，也无反对，如置身毫无边际的荒原，无可措手的了，这是怎样的悲哀呵，
我于是以我所感到者为寂寞。这寂寞又一天一天地长大起来，如大毒蛇，缠住了我的灵魂了。</div>
<script>
Element.prototype.typewriter = function (a) {
var d = this,
c = d.innerHTML,
b = 0;
d.innerHTML = "";
var e = setInterval(function () {
b++
d.innerHTML = c.substring(0, b) + (b & 1 ? "|" : ""); //&1 这个表达式 可以用来 判断 a的奇偶性
if (b >= c.length) {
clearInterval(e)
}
}, 150)
return this
}
document.getElementById("code").typewriter();
</script>
</body>
实现打字效果的插件 typed.js
js： In an input
var typed4 = new Typed('#typed4', {
strings: ['Some strings without', 'Some HTML', 'Chars'],
typeSpeed: 0,
backSpeed: 0,
attr: 'placeholder',
bindInputFocusEvents: true,
loop: true
});
Smart Backspace
var typed3 = new Typed('#typed3', {
strings: ['My strings are: <i>strings</i> with', 'My strings are: <strong>HTML</strong>', 'My strings are: Chars × ©'],
typeSpeed: 0,
backSpeed: 0,
smartBackspace: true, // this is a default
loop: true
});
Shuffled
var typed5 = new Typed('#typed5', {
strings: ['1 Some <i>strings</i> with', '2 Some <strong>HTML</strong>', '3 Chars × ©'],
typeSpeed: 0,
backSpeed: 0,
cursorChar: '_',
shuffle: true,
smartBackspace: false,
loop: true
});
Bulk Typing
var typed6 = new Typed('#typed6', {
strings: ['npm install^1000\n `installing components...` ^1000\n `Fetching from source...`'],
typeSpeed: 40,
backSpeed: 0,
loop: true
});
参考链接（示例）：
https://mattboldt.github.io/typed.js/
http://cheng.lolku.cn/html/typed.html
<style type="text/css">
/* 如果光标没出现，而是出现在下一行，那么就是盒子是块级标签，必须得转换成行内标签 */
h2 {
display: inline;
}
/* 想让的光标闪动的话，复制下面的代码 */
.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>
<span id="box"></span>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script>
var boxObj = document.getElementById('box');
new Typed(boxObj,{
// 注意：输出的可以是标签，将标签当节点运行。比如下面的h2
strings: ['<h2>我是打印字typed.js<h2>','我是案例一222','我是最后一个打印出来的'],
typeSpeed:200 // 速度
});
</script>
typed的事件：
<input type="text" class="box6" name="">
<br>
<br>
<button class="start">开始</button>
<button class="stop">暂停</button>
<button class="toggle">切换</button>
<button class="reset">重置</button>
<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
<script>
var startBtn = document.querySelector('.start');
var stopBtn = document.querySelector('.stop');
var toggleBtn = document.querySelector('.toggle');
var resetBtn = document.querySelector('.reset');
var typed = new Typed('.box6',{
strings: ['温故而知新，可以为师矣。学而不思则罔 思而不学则殆。见贤思齐焉，见不贤而内自省也。'],
typeSpeed: 200,
startDelay: 100,
loop: true,
loopCount: Infinity,
bindInputFocusEvents:true
});
startBtn.onclick = function () {
typed.start();
}
stopBtn.onclick = function () {
typed.stop();
}
toggleBtn.onclick = function () {
typed.toggle();
}
resetBtn.onclick = function () {
typed.reset();
}
</script>
方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号