JavaScript打字机效果实现

最新推荐文章于 2024-09-12 23:23:34 发布

Cheris2014

最新推荐文章于 2024-09-12 23:23:34 发布

阅读量960

点赞数

分类专栏： HTML5 文章标签： javascript

HTML5 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

打字机实现，就是在一个timer循环内，截取要显示的字符串，让本次显示的字符串长度比上一次显示的长度增加1，当全部显示完后停止timer即可。

 
   view plain 
   print 
   ? 
  
 <!doctype html>  
 <html>  
 <head>  
 <meta charset="utf-8">  
 <meta name="title" content="html打字机效果" />  
 <meta name="keywords" content="html打字机效果,文字打字机效果演示,html打字机效果实现,javascript打字机效果实现" />  
 <meta name="description" content="html打字机效果,html打字机效果演示" />  
 <meta name="application-name" content="html打字机效果" />  
 <title>html打字机效果</title>  
 </head>  
   
 <body>  
 <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.οnlοad=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>  
 </body>  
 </html>  