延迟添加背景颜色到文本一秒钟答案

【问题标题】：add background color to text for a second with a delay延迟添加背景颜色到文本一秒钟
【发布时间】：2021-06-10 07:17:19
【问题描述】：

我有这个脚本自己键入文本，然后删除它并从头开始键入。这是一个例子https://typedjs.webflow.io

<script>
  var typed = new Typed(".typed-words", {
  strings: ["Hello, my name is John."],
  typeSpeed: 75,
  backSpeed: 10,
  backDelay: 800,
  startDelay: 500,
  loop: true,
  showCursor: false,
  cursorChar: "|",
  attr: null,
});
</script>

所以它使用 typeSpeed 75。这意味着短语“你好，我的名字是 John”。会以 75 个单位输入到最后。

问题：有没有办法在短语本身完成输入后为其添加背景颜色？所以让我们说“你好，我叫约翰”这个阶段。完成打字，它的背景颜色变成蓝色一秒钟，短语会自行删除并从头开始打字？这是此背景颜色更改的示例：https://marcusts.com/demo/

谢谢

【问题讨论】：

标签： javascript function encoding var

【解决方案1】：

我使用onStringTyped 方法来完成这项任务（我从他们的文档中找到它）。您可以查看我的示例。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<style>
  .last-word {
    color: #299CDF;
  }  
  
</style>
<body>
  
  <div class="typed-words"></div>

  
  <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
  <script>
    console.clear();
    var typed = new Typed(".typed-words", {
      strings: ["Hello, my name is <span class='last-word'>John.</span>", "Hello, my name is <span class='last-word'>Lisa.</span>", "Hello, my name is <span class='last-word'>Beetlejuice.</span>"],
      typeSpeed: 75,
      backSpeed: 50,
      backDelay: 800,
      startDelay: 500,
      loop: true,
      showCursor: false,
      cursorChar: "|",
      attr: null,
      onStringTyped: function(pos, self) {
        const lastWord = document.querySelector('.last-word');
        lastWord.style.background = '#7bfde7';
      }
    });
  </script>
</body>
</html>

【讨论】：

天哪，你是天才