js漸顯文字 時間間隔
阿新 • • 發佈:2018-07-06
你好 好想 ont append script array 官網 char 間隔
文字指定時間間隔,逐漸顯現所有文字。
一日,看到一官網首頁有個文字漸顯,感覺和手寫上去一樣,很是炫酷。F12發現不是動畫,於是研究了下。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>漸顯</title> </head> <body> <div style="font-family:宋體" id="append"></div> <script> var append = document.getElementById("append");
var str1 = ‘你好世界,世界那麽大,我好想去看看!!‘; //要顯現的文字 var array1 = str1.split(‘‘); //將文字切割成單個 console.log(array1); var timer = setInterval(jianbian, 300); //設置時間間隔 循環周期為300毫秒,自行修改 ,每300毫秒執行一次jianbian方法 console.log(array1.length); var i = 0;
//進入方法 function jianbian() {
//循環完畢撤銷時間器 if (i == array1.length) { clearInterval(timer); console.log(‘取消時間器‘); } else {
//依次追加文字 append.innerHTML += array1[i]; console.log(i + ‘:‘ + array1[i]); i++; } } </script> </body> </html>
字體樣式就不貼了。
總結:多看別人寫的東西,終會成就那樣的人。
js漸顯文字 時間間隔