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

一路向前的月光2023-12-22 19:44

功能要求

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

实现想法

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项目使用