时间戳

首页 > 解决方案 > 如何打造打字机效果？

javascript - 如何打造打字机效果？

问题描述

我正在尝试为学校项目创建打字机功能，但我不确定它为什么不起作用

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

在此先感谢您的帮助！

标签： javascripthtml

解决方案

我想你正在寻找这样的东西：

您为字符串的每个字符设置超时，但给每个超时额外的延迟

所以第一个字符将在 0 毫秒延迟后写入
第二个在 100 毫秒延迟后写入
第三个在 200 毫秒延迟后
等等

例子：

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>

推荐阅读