热门标签
热门文章
- 1解读百度⽂⼼⼀⾔_ai
- 2彻底关闭烦人的---FF新推荐
- 3QAnything 1.4.1 中的文档解析_qanything pdf解析
- 4【微命令】git config如何配置全局的用户和邮箱？（--global user.name、user.email；git config --help）_git config --global email
- 52024年Python人工智能学习路线_python ai学习，大厂的面试官_2024年python开发人工智能还需要什么呢
- 6mac protobuf java_Mac安装Protobuf编译Java
- 7kafka相关操作及问题汇总_error in ch.qos.logback.core.rolling.rollingfileap
- 8【OpenCv光流法进行运动目标检测】_光流法 opencv 测速
- 9对于软件外包的理解
- 10Sora是什么？究竟如何使用？_sora中文站
当前位置: article > 正文
使用原生 HTML + JS 实现类似 ChatGPT 的文字逐字显示效果
作者：小惠珠哦 | 2024-07-25 12:38:16
赞
踩
使用原生 HTML + JS 实现类似 ChatGPT 的文字逐字显示效果
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博客】
推荐阅读
相关标签
