纯前端仿GPT流式打字效果的js库，类似通义千问或者其他AI界面的打字效果

最新推荐文章于 2024-12-21 14:44:48 发布

原创

最新推荐文章于 2024-12-21 14:44:48 发布 · 980 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #gpt #javascript #开发语言 #ecmascript

文章介绍了如何使用typed.js库来创建仿造流式打字的动画效果，这种效果常见于GPT等模型的官网设计中。通过提供的JavaScript代码示例，展示了如何配置和应用typed.js，以在网页的<spanid=subTitle></span>元素上展示动态打字效果。该技术在开发客服系统时特别适用，能增加交互趣味性。

因为GPT以及国内各大模型的发布，很多官网都设计的是，仿造流式打字效果，下面这个js库就能轻松实现。

typed.js

具体实现代码参考下面：

<span  id="subTitle"></span>
<script src="https://unpkg.com/typed.js@2.0.15/dist/typed.umd.js"></script>
<script>
    var typed = new Typed('#subTitle', {
        strings: ['我是知识库机器人，一个专门响应人类指令的大模型','我服务于人类，致力于让生活更美好','自建私有数据知识库 · 与知识库AI聊天'],
        cursorChar: '_',
        loop: true,
        typeSpeed: 120,
        backDelay: 3000,
    });
</script>

实现的效果可以看我的官网 gofly.v1kf.com

我这里开发客服系统，所以毕竟契合这个打字效果，就给加上了