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漸顯文字 時間間隔