typecho 实现留言框打字效果效果如文末的留言框

Typecho · 2023-06-07 · 2203 人浏览

我给出的是实例的代码代码，可以根据自己的实际需要添加到comments.php文件。
感觉还是有点意思的，就分享出来吧
代码如下!
[hide]

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>打字效果</title>
  <style>
    #typing-text {
      width: 500px;
      height: 200px;
      font-size: 24px;
      line-height: 36px;
      padding: 20px;
      border: none;
      outline: none;
      resize: none;
    }

    #typing-container {
      display: block;
    }
  </style>
</head>

<body>
  <div id="typing-container">
    <textarea id="typing-text"></textarea>
  </div>

  <script>
    const texts = ["Hello, world! This is a typing effect.", "It's really cool!", "Try it out!", "Have fun coding!"];

    let index = 0;
    let charIndex = 0;
    let timerId;
    const typingText = document.getElementById("typing-text");

    function showText() {
      if (index === texts.length) {
        index = 0;
        charIndex = 0;
      }

      const text = texts[index];
      typingText.value = text.slice(0, charIndex++);
      if (charIndex > text.length) {
        charIndex = 0;
        index++;
        timerId = setTimeout(showText, 2000);
      } else {
        timerId = setTimeout(showText, 50);
      }
    }

    typingText.addEventListener("click", function() {
      typingText.value = "";
      clearTimeout(timerId);
    });

    showText();
  </script>
</body>

</html>

[/hide]

typecho 实现留言框 打字效果 效果如文末的留言框

typecho 实现留言框打字效果效果如文末的留言框