如何让打字机循环？

Question

我想弄清楚如何让打字机以微妙的延迟无限循环。目前，它仅在页面加载时触发。

<!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>

Answer 1

使用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。

如何让打字机循环？

How to get typewriter to loop?

html

javascript

css

loops