前端开发攻略---实现与ChatGPT同款光标闪烁打字效果。

本文主要是介绍前端开发攻略---实现与ChatGPT同款光标闪烁打字效果。,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、演示

2、实现代码

<!DOCTYPE html>
<html lang="ch-ZN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {height: 100vh;background: #ffffff;display: flex;justify-content: center;align-items: center;}.container {margin: 0;display: flex;justify-content: center;align-items: center;width: 490px;height: 672px;background-repeat: no-repeat;background-size: cover;position: fixed;}#box {color: rgb(255, 255, 255);padding: 2%;width: 330px;height: 400px;backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);border-radius: 10px;border: 1px solid rgba(255, 255, 255, 0.18);background-color: #000;}</style><script>let textStr ='Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione, voluptatibus quos consequatur, quibusdam corrupti quo dolor quisquam quae eveniet voluptas, maxime dicta magnam ipsum rem dignissimos soluta sit consequuntur inventore quaerat! Nemo consectetur quo odio odit sed porro velit distinctio nam. Voluptates in nihil deleniti quia ducimus a vel temporibus.'let strp = ''let i = 0// 实现自动打字效果function print1() {if (textStr[i] != '/') {strp += textStr[i]document.getElementById('box').innerHTML = strp + '|'} else {document.getElementById('box').innerHTML = strp + '<br><br>' + '|'strp += '<br><br>'}i++}function print2() {setTimeout(() => {document.getElementById('box').innerHTML = strp + ' '}, 100)setTimeout(() => {document.getElementById('box').innerHTML = strp + '|'}, 600)}let printid = setInterval(() => {print1()if (i == textStr.length) clearInterval(printid)}, 90)setTimeout(() => {setInterval(print2, 1060)}, (textStr.length - 1) * 90)</script></head><body><div class="container"><div id="box"></div></div></body>
</html>

3、实现思路

  1. 创建一个空字符串 strp 用于存储逐字打印的文本内容,以及一个计数器 i 用于跟踪当前打印到的字符的索引。

  2. 编写 print1() 函数,该函数负责实现文本的逐字打印效果。在函数内部,通过检查 textStr 中的字符来逐个构建 strp 字符串,并将其显示在 HTML 页面上的 box 元素中。当遇到 / 字符时,在 box 中添加换行符。

  3. 编写 print2() 函数,该函数用于模拟光标的闪烁效果。通过两个 setTimeout 函数来实现,首先在100毫秒后将光标去除,然后在600毫秒后再次显示光标。

  4. 使用 setInterval 函数创建一个定时器 printid,在90毫秒的间隔内调用 print1() 函数,实现逐字打印的效果。当 i 的值等于 textStr 的长度时,清除定时器,停止打印。

  5. 最后,使用 setTimeout 函数在最后一个字符被打印后启动 print2() 函数,实现光标闪烁效果。

这篇关于前端开发攻略---实现与ChatGPT同款光标闪烁打字效果。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/912800

相关文章

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

关于集合与数组转换实现方法

《关于集合与数组转换实现方法》:本文主要介绍关于集合与数组转换实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Arrays.asList()1.1、方法作用1.2、内部实现1.3、修改元素的影响1.4、注意事项2、list.toArray()2.1、方

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传:从崩溃边缘抢救进度二、多线程加速:榨干网络带宽三、速度控制:做网络的好邻居四、终端交互

java实现docker镜像上传到harbor仓库的方式

《java实现docker镜像上传到harbor仓库的方式》:本文主要介绍java实现docker镜像上传到harbor仓库的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 前 言2. 编写工具类2.1 引入依赖包2.2 使用当前服务器的docker环境推送镜像2.2

C++20管道运算符的实现示例

《C++20管道运算符的实现示例》本文简要介绍C++20管道运算符的使用与实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录标准库的管道运算符使用自己实现类似的管道运算符我们不打算介绍太多,因为它实际属于c++20最为重要的

Java easyExcel实现导入多sheet的Excel

《JavaeasyExcel实现导入多sheet的Excel》这篇文章主要为大家详细介绍了如何使用JavaeasyExcel实现导入多sheet的Excel,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录1.官网2.Excel样式3.代码1.官网easyExcel官网2.Excel样式3.代码

python实现对数据公钥加密与私钥解密

《python实现对数据公钥加密与私钥解密》这篇文章主要为大家详细介绍了如何使用python实现对数据公钥加密与私钥解密,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录公钥私钥的生成使用公钥加密使用私钥解密公钥私钥的生成这一部分,使用python生成公钥与私钥,然后保存在两个文

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景

Golang如何用gorm实现分页的功能

《Golang如何用gorm实现分页的功能》:本文主要介绍Golang如何用gorm实现分页的功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录背景go库下载初始化数据【1】建表【2】插入数据【3】查看数据4、代码示例【1】gorm结构体定义【2】分页结构体