使用打字机效果打印文本，在循环中的每个句子后清除答案

【问题标题】：print text with typewriter effect, clear after each sentence on loop使用打字机效果打印文本，在循环中的每个句子后清除
【发布时间】：2018-03-18 13:12:05
【问题描述】：

我试图用我的文本实现打字机效果，其中每个句子（h1 标签）被打印，然后文本被清除，第二个句子被打印。一旦第二个或第三个句子打印完成，它应该清除并开始循环打印第一个句子。

我无法清除第一句话，所有文字都被堆叠起来，而且“the”这个词也没有出现。

任何想法如何进行？我想将文本保留在 HTML 中，以便在不同的页面上重复使用该脚本。

JSFiddle 链接：https://jsfiddle.net/b33uhLL2/

HTML：

<div id="typewriter">
  <h1>This<br> is<br> the<br>first<br><span class="highlight">sentence</span></h1>
  <h1>This<br> is<br> the<br>second<br>sentence</h1>
</div>

JS：

function setupTypewriter(t) {
  var HTML = t.innerHTML;

  t.innerHTML = "";

  var cursorPosition = 0,
    tag = "",
    writingTag = false,
    tagOpen = false,
    typeSpeed = 200,
    tempTypeSpeed = 0;

  var type = function() {

    if (writingTag === true) {
      tag += HTML[cursorPosition];
    }

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

    cursorPosition += 1;
    if (cursorPosition < HTML.length - 1) {
      setTimeout(type, tempTypeSpeed);
    }

  };

  return {
    type: type
  };
}


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

CSS：

h1 {
  font-family: helvetica;
  font-size: 20px;
}

【问题讨论】：

您是想自己动手，还是只是在寻找解决方案？因为那里已经有很多库已经这样做了
我想将文本保留在 HTML 中，大多数库将文本放在 JS 中

标签： javascript jquery css

【解决方案1】：

GreenSock 可能会给你带来一些运气。

您可以在时间线内使用.from。这是使用两个标题的起点。

const container = document.querySelector('div')
const h1 = document.querySelector('h1')
const h2 = document.querySelector('h2')

const typewriterTimeline = new TimelineMax({
  onStart: () => container.classList.remove('hidden')
})

typewriterTimeline
  .add(TweenMax.from(h1, 3, {text: '', delimiter: ' '}))
  .add(TweenMax.from(h2, 3, {text: '', delimiter: ' '}))

.hidden {
  display: none;
}

<div class='hidden'>
  <h1>This is the title</h1>
  <h2>This is the subtitle</h2>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/TextPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

为了使这更加动态，您可以循环播放您的内容并生成一个时间线。

【讨论】：