使用原生 HTML + JS 实现类似 ChatGPT 的文字逐字显示效果_html实现一段话逐字输出

作者：在线问答5 | 2024-07-26 15:46:34

踩

html实现一段话逐字输出

ChatGPT 的逐字显示效果很酷炫，那么我们可以尝试实现类似的效果。

定义一个基本 HTML 结构

<div class="chat-container">
  <div id="message"></div>
</div>
1
2
3

编写 JS 代码

const messageElement = document.getElementById("message");
const text =
  "这是一个模拟 ChatGPT 的文字输出效果的示例。文字会逐字显示，就像是实时生成的。";
let index = 0;

function typeText() {
  if (index < text.length) {
    messageElement.textContent += text[index];
    index++;
    setTimeout(typeText, 50); // 50ms 显示一个字符
  }
}

typeText();
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这段 HTML 代码定义了一个名为 typeText 的函数，函数通过逐个显示字符串 text 中的字符，营造出文字实时生成的效果。

具体实现方式是通过 setTimeout 函数每隔 50 毫秒显示一个字符，直到整个字符串显示完毕。函数内部使用 index 变量来记录当前要显示的字符位置，并通过 messageElement.textContent 将字符添加到页面上的 message 元素中。

最后，通过调用 typeText 函数启动文字输出的模拟效果。

完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ChatGPT 文字效果</title>
  </head>
  <body>
    <div class="chat-container">
      <div id="message"></div>
    </div>
    <script>
      const messageElement = document.getElementById("message");
      const text =
        "这是一个模拟 ChatGPT 的文字输出效果的示例。文字会逐字显示，就像是实时生成的。";
      let index = 0;

      function typeText() {
        if (index < text.length) {
          messageElement.textContent += text[index];
          index++;
          setTimeout(typeText, 50); // 50ms 显示一个字符
        }
      }

      typeText();
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/在线问答5/article/detail/886062