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>