js如何將字元串中的字元逐字輸出:有些網頁效果,可以將字元串中的字元逐字輸出,類似於打字機的方式,下麵就通過實例代碼介紹一下如何實現此功能。代碼實例如下:螞蟻部落 以上代碼實現了我們的要求,能夠將字元串中的字元逐個輸出,代碼比較簡單,這裡就不多介紹了,如有任何問題可以跟帖留言。一.實現原理:...
js如何將字元串中的字元逐字輸出:
有些網頁效果,可以將字元串中的字元逐字輸出,類似於打字機的方式,下麵就通過實例代碼介紹一下如何實現此功能。
代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #thediv { width:200px; height:30px; line-height:30px; margin:0px auto; } </style> <script type="text/javascript"> var printStr=function(id,str){ var i=0; var content=""; var arr=null; var flag=null; var done=function() { arr=str.split(""); content=content+arr[i]; var odiv=document.getElementById(id); odiv.innerHTML=content; i=i+1; if(i==arr.length){clearInterval(flag)} } flag=setInterval(done,200); } window.onload=function() { var str="I love antzone"; printStr("thediv",str); } </script> </head> <body> <div id="thediv"></div> </body> </html>
以上代碼實現了我們的要求,能夠將字元串中的字元逐個輸出,代碼比較簡單,這裡就不多介紹了,如有任何問題可以跟帖留言。
一.實現原理:
原理非常的簡單,首先將字元串轉換為數組,每一個字元是一個數組中的元素,然後通過定時器函數,每隔指定的事件設置一個div中的內容,而這個內容,每隔指定的時間都會發生變化,這個變化就是比之前增加了一個數組中的字元,也就實現逐個輸出的效果。
二.相關閱讀:
1.split()函數可以參閱javascript的String對象的split()方法一章節。
2.setInterval()函數可以參閱window對象的setInterval()方法一章節。
3.clearInterval()函數可以參閱window對象的clearInterval()方法一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10516
更多內容可以參閱:http://www.softwhy.com/javascript/