JS实现简单的gpt打字机效果

功能要求

在后台传输得到的数据在展示时候进行打字机效果一个字一个字进行展示

实现想法

1、在一个滚动容器中展示一个个文字,也就是将全部数据截取出来添加到一个新数组中

2、采用循环或者定时器进行编写

注意:前提条件是需要后端传值提供 换行符号或者其他标识符,不然只会进行一整段的显示

代码

html 复制代码
<scroll-view scroll-y="true" :scroll-top="scrollTop" style="height: 54vh;">
	<u-parse :content="answerShow"></u-parse>
</scroll-view>

这里使用的是uniapp中的富文本解析器,因为需要换行,采用的</br>,所以使用了富文本进行

采用text或者div之类的可以自己进行尝试

拿到后台返回的json数据后

javascript 复制代码
		onebyone(res) {
				var i = 0;
				let that = this
				let res1 = res.replace(/\n/g, '<br/>').replace(/[**]/g, '')
				var time = setInterval(function() {
					var text = res1.substring(0, i);
					i++
					if (i >= 1) {
						that.scrollTop++
					}
					that.answerShow = text
					if (text.length == res1.length) {
						//   console.log("定时器结束!");
						clearInterval(time);
					}
				}, 100)
			},

将后台的/n换行变成可以解析的换行,**是加粗的替换

采用定时器,每次i++来控制,每次执行进行 提取添加,当两个文本值一致后结束定时器

这里还需要控制的是滚动高度进行添加,使其滚动

,不止适用于小程序,还可以在pc项目使用

相关推荐
西陵几秒前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
叹一曲当时只道是寻常1 分钟前
vue中添加原生右键菜单
javascript·vue.js
小磊哥er11 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
旷世奇才李先生16 分钟前
Next.js 安装使用教程
开发语言·javascript·ecmascript
ᥬ 小月亮21 分钟前
webpack基础
前端·webpack
YongGit40 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学