這個問題在這里已經有了答案： 我需要幫助理解 setInterval() - 這段代碼的行為不像我認為的那樣 （1 個答案） 3天前關閉。
我想弄清楚如何讓打字機以微妙的延遲無限回圈。目前，它僅在頁面加載時觸發。
<!DOCTYPE html>
<html>
<body>
<h1>Typewriter</h1>
<p id="demo"></p>
<script>
var i = 0;
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;
function typeWriter() {
if (i < txt.length) {
document.getElementById("demo").innerHTML = txt.charAt(i);
i ;
setTimeout(typeWriter, speed);
}
}
window.onload = typeWriter;
</script>
</body>
</html>
uj5u.com熱心網友回復：
使用setTimeout：將段落重置回""乞討。當回圈內達到文本長度時，重置i為0. 要添加延遲，如果是最后一個字符，只需使用不同的速度。
但是，最好setInterval在您的情況下使用，這是一個示例：
<h1>Typewriter</h1>
<p id="demo"></p>
<script>
var txt = 'Lorem ipsum dummy text blabla.';
var speed = 50;
var elem = document.getElementById('demo');
function typeWriter() {
var i = 0;
elem.textContent = "";
var interval = setInterval(function(){
elem.textContent = txt[i];
i ;
if (i === txt.length) {
clearInterval(interval);
setTimeout(typeWriter, 3000);
}
}, speed)
}
window.onload = typeWriter;
</script>正如@Scott Marcus 在評論中所建議的那樣，在您僅更改文本時使用textContent而不是。innerHTML
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/482196.html
標籤：javascript html css 循环
上一篇：回圈和If陳述句來檢查和加載包