如何打造打字機效果？

Question

我正在嘗試為學校項目創建打字機 function，但我不確定它為什么不工作

HTML 代碼：

<h1 id="typewriter"></h1>

Javascript 代碼：

typewriter();

function typewriter() {
    var textArray = text1.split("");
    for (var i = 0; i < textArray.length; i++) {
        document.getElementById('typewriter').innerHTML = textArray[i];
        setTimeout(typewriter, 80);
    }
}

在此先感謝您的幫助！

Answer 1

我想你正在尋找這樣的東西：

您為字符串的每個字符設置超時，但給每個超時額外的延遲

所以第一個字符將在 0ms 延遲后寫入
100ms 延遲后的第二個
200ms延遲后的第三個
等等

例子：

 function typewriter(element, text, delay = 100) { for (let i = 0; i < text.length; i++) { setTimeout(() => { element.innerHTML += text[i]; }, delay * i); } } const el = document.getElementById("typewriter"); typewriter(el, "Lorem ipsum dolor sit amet");

 <h1 id="typewriter"></h1>

Answer 2

使用現代的 async/await 使這樣的事情變得簡單而美好。

 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); async function typewriter(element, text, delay = 100) { for (let i = 0; i < text.length; i++) { await sleep(delay); element.innerHTML += text[i]; } } const el = document.getElementById("typewriter"); typewriter(el, "Lorem ipsum dolor sit amet");

 <h1 id="typewriter"></h1>

Answer 3

您需要 setInterval 多次觸發 function。 設置超時它只在時間到來時觸發一次

text = text.split("")

function typewriter() {
    document.getElementById('typewriter').innerHTML += text.shift();
}


setInterval(typewriter, 1000);

Answer 4

使用這種方式它會工作。

var i = 0;
var text = "Hello World!!";
typewriter();
function typewriter() {
    debugger;
    if (i < text.length) {
        document.getElementById('typewriter').innerHTML += text.charAt(i);
        i++;
        setTimeout(typewriter, 100);
    }
}