1.效果圖展示
在HTML頁面上實現一行文字動態展示，要求：文字逐漸出現，全部文字出現后，重新從頭開始，不斷重復。
2.代碼實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var msg = "學如逆水行舟，不進則退；心似平原縱馬，易放難收"; var i = 0; function play(){ if(i <= msg.length){ var text = document.getElementsByClassName("text")[0]; text.innerText = msg.substring(0, i); setTimeout("play()", 200); i++; }else { i = 0; console.clear(); console.log("一次輪播結束，新一次輪播開始。"); setTimeout("play()", 1000); } } </script> </head> <body onLoad="play()"> <div style="margin: 200px auto; text-align: center;"> <h1 class="text"></h1> </div> </body> </html>
3.進階
從其它的元素（比如input輸入框）中獲取字符串，在網頁上輸出。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body onLoad="play()"> <input type="hidden" id="myText" value="學如逆水行舟，不進則退；心似平原縱馬，易放難收"> <div style="margin: 200px auto; text-align: center;"> <h1 class="text"></h1> </div> </body> <script> var msg = document.getElementById("myText").value; var i = 0; console.log(msg.length); function play(){ if(i <= msg.length){ var text = document.getElementsByClassName("text")[0]; text.innerText = msg.substring(0, i); setTimeout("play()", 200); i++; }else { i = 0; console.clear(); console.log("一次輪播結束，新一次輪播開始。"); setTimeout("play()", 1000); } } </script> </html>
注意：js腳本(script)中的內容必須放在最后，否則會出現錯誤（網頁加載流程決定的）。
4.總結
其實感覺還是挺簡單的，就是不同函數的使用而已，但以前學的時候總覺得可難了，或許這就是難者不會，會者不難吧。
5.注意點
在使用 document.getElementById獲取網頁元素的時候，獲取之后即可使用，因為id是唯一標識的，但在使用其他獲取方式，比如getElementByClassName等方法獲取元素的時候，因為獲取到的是一個數組，所以需要指定是哪一個（如果只有一個也要用getElementByClassName[0]形式）之后再使用元素。