如何让滑块上的Typpy Tappy Typer打字机动画循环播放？

你遇到的问题很典型——原脚本默认只执行一次打字动画，完成后就没有后续触发逻辑了。我调整了代码，加入了循环重置的逻辑，让动画可以重复播放，同时还修复了原代码里最后一个字符无法显示的小问题。

修改核心点 #

1. 保存原始的HTML内容，避免循环时丢失格式
2. 在打字动画完成后，添加一段延迟（可自定义时长），然后重置所有状态变量和元素内容，重新触发打字函数
3. 修正了原代码中字符计数的判断逻辑，确保所有内容都能完整输出

修改后的完整代码 #

JavaScript 部分

function setupTypewriter(t) {
  // 提前保存原始HTML内容，用于循环时重置
  const originalHTML = t.innerHTML;
  t.innerHTML = "";
  let cursorPosition = 0, tag = "", writingTag = false, tagOpen = false, typeSpeed = 100, tempTypeSpeed = 0;

  const type = function() {
    if (writingTag === true) {
      tag += originalHTML[cursorPosition];
    }

    if (originalHTML[cursorPosition] === "<") {
      tempTypeSpeed = 0;
      if (tagOpen) {
        tagOpen = false;
        writingTag = true;
      } else {
        tag = "";
        tagOpen = true;
        writingTag = true;
        tag += originalHTML[cursorPosition];
      }
    }

    if (!writingTag && tagOpen) {
      tag.innerHTML += originalHTML[cursorPosition];
    }

    if (!writingTag && !tagOpen) {
      if (originalHTML[cursorPosition] === " ") {
        tempTypeSpeed = 0;
      } else {
        tempTypeSpeed = (Math.random() * typeSpeed) + 50;
      }
      t.innerHTML += originalHTML[cursorPosition];
    }

    if (writingTag === true && originalHTML[cursorPosition] === ">") {
      tempTypeSpeed = (Math.random() * typeSpeed) + 50;
      writingTag = false;
      if (tagOpen) {
        const newSpan = document.createElement("span");
        t.appendChild(newSpan);
        newSpan.innerHTML = tag;
        tag = newSpan.firstChild;
      }
    }

    cursorPosition += 1;

    if (cursorPosition < originalHTML.length) {
      setTimeout(type, tempTypeSpeed);
    } else {
      // 完成打字后，等待2秒再重置循环（可自行调整延迟时长）
      setTimeout(() => {
        cursorPosition = 0;
        tag = "";
        writingTag = false;
        tagOpen = false;
        t.innerHTML = "";
        type();
      }, 2000);
    }
  };

  return { type: type };
}

const typer = document.getElementById('typewriter');
typewriter = setupTypewriter(typer);
typewriter.type();

CSS 部分（无需修改）

.var-highlight{ color: #C0AD60; }
.string-highlight{ color: rgba(253, 149, 90, 0.8); }

#typewriter{
  font-size: 2em;
  margin: 0;
  font-family: "Courier New";
  &:after{
    content: "|";
    animation: blink 500ms linear infinite alternate;
  }
}

@-webkit-keyframes blink{
  0%{opacity: 0;}
  100%{opacity: 1;}
}

@-moz-keyframes blink{
  0%{opacity: 0;}
  100%{opacity: 1;}
}

@keyframes blink{
  0%{opacity: 0;}
  100%{opacity: 1;}
}

HTML 部分（无需修改）

<pre id="typewriter">
  <span class="var-highlight">var</span> object = {
    name: <span class="string-highlight">'Foo'</span>,
    type: <span class="string-highlight">'Bar'</span>,
    location: <span class="string-highlight">'Earth'</span>,
    properties:[<span class="string-highlight">'Javascript'</span>, <span class="string-highlight">'HTML'</span>, <span class="string-highlight">'CSS'</span>]
  };
</pre>

自定义调整说明 #

你可以修改JavaScript代码中setTimeout(() => { ... }, 2000)里的2000数值，这个是动画完成后等待的毫秒数，数值越大，两次动画之间的间隔越长。

内容的提问来源于stack exchange，提问作者Tristrella