ChatGPT 的逐字显示效果很酷炫，那么我们可以尝试实现类似的效果。
定义一个基本 HTML 结构
<div class="chat-container"><div id="message"></div>
</div>
编写 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();
这段 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>
)
