JS实现的打字机效果完整实例
本文实例讲述了JS实现的打字机效果。分享给大家供大家参考，具体如下：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<!--AlwaysforcelatestIErenderingengine(eveninintranet)&ChromeFrame
Removethisifyouusethe.htaccess-->
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<title>JS打字机效果</title>
<metaname="description"content="">
<metaname="author"content="Administrator">
<metaname="viewport"content="width=device-width;initial-scale=1.0">
<!--Replacefavicon.ico&apple-touch-icon.pngintherootofyourdomainanddeletethesereferences-->
<styletype="text/css">
#main{
width:80%;
height:750px;
margin:auto;
padding:10px;
background:#cfe1ca;
border:10pxoutset#f9c6aa;
line-height:30px;
color:#9f3c61;
font-size:18px;
}
p{
text-indent:30px;
}
</style>
<scripttype="text/javascript">
vartypeWriter={
msg:function(msg){
returnmsg;
},
len:function(){
returnthis.msg.length;
},
seq:0,
speed:150,//打字时间(ms)
type:function(){
var_this=this;
document.getElementById("main").innerHTML=_this.msg.substring(0,_this.seq);
if(_this.seq==_this.len()){
_this.seq=0;
clearTimeout(t);
}
else{
_this.seq++;
vart=setTimeout(function(){_this.type()},this.speed);
}
}
}
window.onload=function(){
alert("welcometohttps://www.nhooo.com")
varmsg="JS打字机效果，原理很简单：每次多获取一个待打出的字符串的值，输出，覆盖原来输出的内容即可";
functiongetMsg(){
returnmsg;
}
typeWriter.msg=getMsg(msg);
typeWriter.type();
}
</script>
</head>
<body>
<divid="main"></div>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。