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

功能要求

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

实现想法

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

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

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

代码

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

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

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

拿到后台返回的json数据后

		onebyone(res) {var i = 0;let that = thislet 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 = textif (text.length == res1.length) {//   console.log("定时器结束!");clearInterval(time);}}, 100)},

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/232753.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pytorch读写张量文件

目录 一、加载和保存张量 1、直接读写张量 2、读写张量列表 3、读写张量字典 二、加载和保存模型参数 一、加载和保存张量 1、直接读写张量 对于单个张量&#xff0c;我们可以直接调用load和save函数分别读写它们。这两个函数都要求我们提供一个名称&#xff0c;save要求将…

C++11 shared_ptr智能指针

转载自c语言中文网 在实际的 C 开发中&#xff0c;我们经常会遇到诸如程序运行中突然崩溃、程序运行所用内存越来越多最终不得不重启等问题&#xff0c;这些问题往往都是内存资源管理不当造成的。比如&#xff1a; 有些内存资源已经被释放&#xff0c;但指向它的指针并没有改…

FO with Prefix Hashing KEM Generalizations

参考文献&#xff1a; [Has88] Hastad J. Solving simultaneous modular equations of low degree[J]. siam Journal on Computing, 1988, 17(2): 336-341.[BBM00] Bellare M, Boldyreva A, Micali S. Public-key encryption in a multi-user setting: Security proofs and im…

2023 英特尔On技术创新大会直播 | AI 融合发展之旅

前言 2023 年的英特尔 On 技术创新大会中国站&#xff0c;主要聚焦最新一代增强 AI 能力的计算平台&#xff0c;深度讲解如何支持开放、多架构的软件方案&#xff0c;以赋能人工智能并推动其持续发展。 大会的目标之一是优化系统并赋能开发者&#xff0c;特别注重芯片增强技术…

国产划片机品牌众多,如何选择优质的供应商?

在半导体行业的发展浪潮中&#xff0c;划片机作为关键设备之一&#xff0c;其性能和质量对于生产过程的高效性和产品的质量具有至关重要的影响。近年来&#xff0c;国产划片机的品牌数量不断增多&#xff0c;为半导体行业提供了更多的选择。然而&#xff0c;如何从众多的品牌中…

解决docker拉取镜像错误 missing signature key 问题

核心原因&#xff1a;本地docker版本过低&#xff0c;需要&#xff1a; 1. 彻底卸载本地docker文件 2. 配置yum 镜像文件&#xff0c; 重新安装最新版本 相信教程可参考&#xff1a; CentOS安装Docker(超详细)_centos 安装docker-CSDN博客

七大主流的HttpClient程序比较

HttpClient HttpClient&#xff0c;是一款强大的支持HTTP协议的客户端编程工具包。主要功能在于提供一种有效、最新且功能丰富的方式来执行HTTP请求和响应。HttpClient与浏览器有着本质的区别&#xff0c;它并不会缓存内容&#xff0c;也不会处理嵌入在HTML页面中的代码或是错误…

【Python炫酷系列】一闪一闪亮星星,漫天都是小星星(完整代码)

文章目录 环境需求完整代码详细分析系列文章环境需求 python3.11.4及以上版本PyCharm Community Edition 2023.2.5pyinstaller6.2.0(可选,这个库用于打包,使程序没有python环境也可以运行,如果想发给好朋友的话需要这个库哦~)【注】 python环境搭建请见:https://want595.…

uart和usart的区别

UART 通用异步收发器&#xff0c;一般来说&#xff0c;在单片机上&#xff0c;名为UART的接口只能用于异步串行通信。 USART 名为USART的接口既可用于同步串行通信&#xff0c;也可用于异步串行通信。

Python 爬虫之简单的爬虫(四)

爬取动态网页&#xff08;下&#xff09; 文章目录 爬取动态网页&#xff08;下&#xff09;前言一、大致内容二、基本思路三、代码编写1.引入库2.加载网页数据3.获取并保存4.保存文档 总结 前言 上篇主要讲了如何去爬取数据&#xff0c;这篇来讲一下如何在获取的同时将数据整…

每个开发人员都应该知道的六个生成式 AI 框架和工具

在快速发展的技术环境中&#xff0c;生成式人工智能是一股革命性的力量&#xff0c;它改变了开发人员处理复杂问题和创新的方式。本文深入探讨了生成式 AI 的世界&#xff0c;揭示了对每个开发人员都至关重要的框架和工具。 1. LangChain LangChain 由 Harrison Chase 开发并于…

Ansible自动化运维以及模块使用

ansible的作用&#xff1a; 远程操作主机功能 自动化运维(playbook剧本基于yaml格式书写) ansible是基于python开发的配置管理和应用部署工具。在自动化运维中&#xff0c;现在是异军突起 ansible能够批量配置、部署、管理上千台主机。类似于Xshell的一键输入工具。不需要每…

Linux 命令大全备忘录

碰巧一些 Linux 终端命令很难回忆起来&#xff0c;将它们作为备忘单保存在您的计算机或纸张上是一种很好的做法。此列表并不详尽&#xff0c;但它包括最常用的命令。请随时在下面的评论中添加您最常用的命令并分享此列表✌️。 用户 Id – 有关用户&#xff08;uid、gid 和组…

通过层进行高效学习:探索深度神经网络中的层次稀疏表示

一、介绍 深度学习中的层次稀疏表示是人工智能领域日益重要的研究领域。本文将探讨分层稀疏表示的概念、它们在深度学习中的意义、应用、挑战和未来方向。 最大限度地提高人工智能的效率和性能&#xff1a;深度学习系统中分层稀疏表示的力量。 二、理解层次稀疏表示 分层稀疏表…

JDK各个版本特性讲解-JDK19特性

JDK各个版本特性讲解-JDK19特性 一、JAVA19概述二、新特性介绍1. 记录模式(预览版本)2.Linux/RISC-V 移植3.外部函数和内存 API &#xff08;预览版&#xff09;4.虚拟线程(预览版)5.Vector API &#xff08;第四次孵化&#xff09;6.Switch 模式匹配&#xff08;第三预览版&am…

从C代码制作chm开发文档【doxygen + graphviz+winChm】

需要的工具&#xff1a; 1. doxygen 最新版本 2. graphviz 最新版本 3. winChm破解版本 1. 最后制作的效果 2. 生成HTML文档 生成hmtl文档是勾选如下2项&#xff0c;为生成chm准备&#xff1a; 需要选择如下2项&#xff1a; generate HTMLHELP 生…

C语言数据结构-排序

文章目录 1 排序的概念及运用1.1 排序的概念1.2 排序的应用 2 插入排序2.1 直接插入排序2.2 希尔排序2.3 直接排序和希尔排序对比 3 选择排序3.1 堆排序3.2 直接选择排序 4 交换排序4.1 冒泡排序4.2 快速排序4.2.1 挖坑法14.2.2 挖坑法24.2.3 挖坑法3 5 并归排序6 十万级别数据…

基于RBAC的k8s集群权限管控案例

在日常的kubernetes集群维护过程中&#xff0c;常常涉及多团队协作&#xff0c;不同的团队有不同的操作和权限需求。比如&#xff0c;运维团队需要有node的所有操作权限&#xff0c;以便对集群进行节点的扩缩容等日常维护工作&#xff0c;但资产运营团队通常只需要node的查看权…

深入探索Git的高级技巧与神奇操作(分支,高效合并)

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 深入探索Git的高级技巧与神奇操作 前言强制推送的妙用1. 什么是强制推送&#xff1f;2. 为什么需要使用强制推送&#xff1f;3. 强制推送的风险与注意事项4. 如何正确、安全地执行强制推送步骤&#x…

vCenter HA拆分和部署

原创作者&#xff1a;运维工程师 谢晋 vCenter HA拆分和部署 拆分vCenter HA部署vCenter HA 拆分vCenter HA 客户vCenter HA内一台虚拟机出现故障无法连接&#xff0c;报错如下&#xff1a; 点击移除集群报错如下&#xff1a; 查找官方KB&#xff0c;按照官方KB进行移除…