javascript2014-07-17 00:06:51 3664
本javascript打字机实现原理非常简单,就是在一个timer循环内,截取要显示的字符串,让本次显示的字符串长度比上一次显示的长度增加1,就出现了打字机的效果,当全部显示完后停止timer即可。
<div style="width:500px; margin:0 auto; margin-top:100px;"><a id="MainContainer"></a></div> <script type="text/javascript"> var mtimer; var index=1; var length=0; var words; var delay=200; window.onload=function(){ words="HTML打字机效果实现,HTML打字机效果实现"; length=words.length; mtimer=setInterval("Show()", delay); } function Show(){ if(index==words.length){ clearInterval(mtimer); } document.getElementById("MainContainer").innerHTML=words.substr(0,index); index++; } </script>
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:JavaScript打字机效果,html文字打字机效果演示
文章固定链接:https://www.pengyaou.com/legendsz/front/codejs/NTI=.html
上一篇 CSS选项按钮