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

相关推荐
界面开发小八哥2 分钟前
数据可视化图表库LightningChart JS v8.0上线:全新图例系统 + 数据集重构
javascript·信息可视化·数据可视化·lightningchart
LJC_Superman29 分钟前
Web与Nginx网站服务
运维·服务器·前端·网络·数据库·nginx·vim
烛阴32 分钟前
【TS 设计模式完全指南】从“入门”到“劝退”,彻底搞懂单例模式
javascript·设计模式·typescript
星秋Eliot38 分钟前
Flutter的三棵树
前端·flutter
正义的大古39 分钟前
OpenLayers常用控件 -- 章节六:全屏控件教程
前端·javascript·html·openlayers
lypzcgf1 小时前
Coze源码分析-资源库-删除插件-前端源码-核心组件实现
前端·typescript·前端框架·react·coze·coze插件·智能体平台
草梅友仁2 小时前
草梅 Auth 1.6.0 发布密码强度组件 Twilio 短信支持 | 2025 年第 36 周草梅周报
前端·开源·github
正义的大古3 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
Hashan3 小时前
深入理解:Webpack编译原理
前端·webpack
雲墨款哥3 小时前
一个前端开发者的救赎之路-JS基础回顾(五)-数组
前端·javascript·面试