延迟为文本添加背景颜色一秒钟

Question

我有这个脚本，它可以自己输入文本，然后删除它并从头开始输入。这是一个例子 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>

所以它的类型是 Speed 75。这意味着短语“你好，我叫约翰。”将以 75 为单位输入到最后。

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

谢谢

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

延迟为文本添加背景颜色一秒钟

add background color to text for a second with a delay

javascript

encoding

var

function