js实现键盘自动打字效果
最近在网上看到一个字符逐个出现的打字效果，觉得挺有趣的，想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符，于是就基于jQuery写了一个简单版的。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"
content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>AutoType</title>
</head>
<body>
<divid="autotype"></div>
<scriptsrc="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$.fn.autotype=function(str,speed){
varself=this,
defaultStr='<p>我希望有个如你一般的人.</p><br>'
+'<p>如山间清爽的风.</p><br>'
+'<p>如古城温暖的光.</p><br>'
+'<p>从清晨到夜晚.</p><br>'
+'<p>由山野到书房.</p><br>'
+'<p>只要最后是你，就好.</p><br>',//将要添加的元素的默认内容
defaultSpeed=100,
str=str||defaultStr,
speed=speed||defaultSpeed,
index=0,
timer=setInterval(function(){
varcurrent=str.substr(index,1);
if(current=='<'){
index=str.indexOf('>',index)+1;
}else{
index++;
}
self.html(str.substring(0,index)+((index&1)&&(index!=str.length)?'_':''));
if(index>=str.length){
clearInterval(timer);
}
},speed);
};
$("#autotype").autotype();
</script>
</body>
</html>
本人才疏学浅，总觉得自己写的方法比较简陋，于是搜索了一波资料，发现有个不错的jQuery插件Typed.js。
Type.js的基础使用
<scriptsrc="jquery.js"></script>
<scriptsrc="typed.js"></script>
<script>
$(function(){
$(".element").typed({
strings:["Firstsentence.","Secondsentence."],
typeSpeed:0
});
});
</script>
...
<spanclass="element"></span>
插件为用户定制了许多默认设置与效果
<script>
$(function(){
$(".element").typed({
strings:["Firstsentence.","Secondsentence."],
//OptionallyuseanHTMLelementtograbstringsfrom(mustwrapeachstringina<p>)
stringsElement:null,
//typingspeed
typeSpeed:0,
//timebeforetypingstarts
startDelay:0,
//backspacingspeed
backSpeed:0,
//shufflethestrings
shuffle:false,
//timebeforebackspacing
backDelay:500,
//loop
loop:false,
//false=infinite
loopCount:false,
//showcursor
showCursor:true,
//characterforcursor
cursorChar:"|",
//attributetotype(null==text)
attr:null,
//eitherhtmlortext
contentType:'html',
//callwhendonecallbackfunction
callback:function(){},
//startingcallbackfunctionbeforeeachstring
preStringTyped:function(){},
//callbackforeverytypedstring
onStringTyped:function(){},
//callbackforreset
resetCallback:function(){}
});
});
</script>
具体用法可以看看GitHub地址，带注释的源码400多行，不算复杂。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！