前端开发攻略---实现与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

相关文章

HTML5 Mobile Upload

HTML5移动端图片上传并前端预览 用到了HTML5的FileReader对象,主要思想是由于移动端的网络不比PC快,故需要做上传前预览,采用base64编码目前是比较好的方法。前端用FileReader获取图片并转为base64编码并<img>预览,上传到服务器由后台解码生成图片并保存到磁盘。 核心代码: $('input[type=file]').change(function(){

html5 progress元素

progress元素是HTML5中新增的状态交互元素,用来表示页面中某个任务完成的进度,IDL定义如下: interface HTMLProgressElement : HTMLElement {attribute double value;attribute double max;readonly attribute double position;readonly attribut

HTML5上传图片base64编码显示缩略图

<li><label for="username">营业执照</label><a href="javascript:void(0);" class="cert-btn-blue-add"><span class="icon-add-white"></span><input type="file" capture="camera"/>添加图片</a><a class="cert-arrow-ri

jQuery插件 笔记

//闭包限定命名空间(function ($) {//默认参数var defaluts = {foreground: 'red',background: 'yellow'};$.fn.extend({"highLight": function (options) {var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖

【微信小程序canvas】实现小程序手写板用户签名(附代码)

【微信小程序canvas】实现小程序手写板用户签名(附代码) 工作中公司业务需要的微信小程序用户签字功能 先看效果图:   demo wxml <view class="wrapper"><view class="handBtn"><button catchtap="retDraw" class="delBtn">重写</button><button catchtap="subCa

uni-app获取手机通讯录(基于HTML5+)

官方API:https://www.html5plus.org/doc/zh_cn/contacts.html   话不多说,直接上代码 contacts.vue <template><view><button type="primary" @tap="getContacts">获取联系人</button><block v-for="(item,index) in list" :k

好用的vue富文本编辑器记录

vue-quill-editor https://github.com/surmon-china/vue-quill-editor https://www.npmjs.com/package/vue-quill-editor https://blog.csdn.net/nickroprak/article/details/86645519(自定义图片上传) *默认上传图片为base64编吗

vuex重点笔记

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 这个状态自管理应用包含以下几个部分: state,驱动应用的数据源;view,以声明方式将 state 映射到视图;actions,响应在 view 上的用户输入导致的状态变化。 但是,当我们的应用遇到多个组件共享状态时,单向数据流的简

vue 电脑端调摄像头拍照,canvas转base64,base64转图片文件并上传到服务器

VUE(用了iview):  <template><div id='cameraUpload'><Form ref='member' :label-width='120' :model='member' :rules='memberRule' style='width: 600px'><FormItem label='照片' prop='photo'><div v-if="member.phot