如何打造打字机效果？

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);
    }
}