学习JS,实现自动打字机动效
前几天遇到一个需求,产品告诉我说,希望这些字可以像自动打字那样,一个一个的出来,于是在完成需求的同时,顺便把这个方法记录出来,看大家是否也需要。
目录
1、实现思路
2、html布局和css样式
3、预定义前置变量
4、动效过程解析
5、完整源代码
6、结语
1、实现思路
首先这个需求的目的是实现自动打字机效果,意思就是文字会一个一个出来,而且文字的最终显示提前已经固定,或者是已经获取完成了;
然后就需要每次将文字字符串拆开,每次比上一次多显示一个文字,并且清除掉上一次的显示;
每次累加要显示的文字,必定有个累加的过程,这里就需要用到递归显示,而递归的重要点在于阈值停止,所以累加的索引和字符串的长度应该有一个判断,以停止继续执行递归。
2、html布局和css样式
本功能并没有复杂的样式显示,所以布局只是用了一个div元素,而为了还原需求,将背景设置为黑底,文字设置为白色,更有一种自动打字机的科技感,代码如下:
<div class="word"></div><style>body {background: #000;}.word {margin: 100px;width: 500px;height: 30px;padding: 2px 10px;font-size: 26px;color: #FFF;font-weight: bold;}
</style>
3、预定义前置变量
需要预定义一个最终显示的字符串; 需要定义获取dom的变量;需要定义一个索引变量,用于不但累加计算;需要定义定时打字的变量,用于setTimeout的方法定义,以实现真实打字的场景特效;需要提前定义一个获取字符串长度的变量;需要定义每个阶段显示的字符串的变量;这里共定义了6个变量,代码如下:
var wordStr = '2023年,喜迎新春,玉兔吉祥';
var wordDom = document.querySelector('.word');var num = 0;
var wordTimeout = null;
var wLength = wordStr.length;
var showWord = '';
4、动效过程解析
既然是模拟打字效果,咱们定义的字符串是“2023年,喜迎新春,玉兔吉祥”,所以显示过程肯定是:第一次显示“2”,第二次显示“20”,第三次显示“202”,以此类推,通过上一步预定义的num值累加,最终将字符串全部显示出来,所以第一步代码应该是:
showWord += wordStr.charAt(num);
wordDom.innerHTML = showWord;
此时num值为0,通过字符串的charAt获取固定索引的字符,也就是“2” ,但既然要模拟真实打字效果,打字都是需要时间的,所以,我们加上setTimeout函数,有个演示打字效果:
wordTimeout = setTimeout(() => {showWord += wordStr.charAt(num);wordDom.innerHTML = showWord;
}, 300)
而这只是第1个文字,想要实现不断累加,就得有个回调,用于源源不断的累加,计算,渲染显示:
function autoWord() {wordTimeout = setTimeout(() => {showWord += wordStr.charAt(num);wordDom.innerHTML = showWord;num++;autoWord(); // 递归调用}, 300)
}
autoWord();
而递归的重点在于源源不断,阈值而停
if (num < wLength) {autoWord();
} else {window.clearTimeout(wordTimeout);wordTimeout = null;
}
5、完整源代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自动打字机</title><style>* {margin: 0;padding: 0;}body {background: #000;}.word {margin: 100px;width: 500px;height: 30px;padding: 2px 10px;font-size: 26px;color: #FFF;font-weight: bold;}</style>
</head>
<body><div class="word"></div><script>var wordStr = '2023年,喜迎新春,玉兔吉祥';var wordDom = document.querySelector('.word');var num = 0;var wordTimeout = null;var wLength = wordStr.length;var showWord = '';function autoWord() {wordTimeout = setTimeout(() => {showWord += wordStr.charAt(num);wordDom.innerHTML = showWord;num++;if (num < wLength) {autoWord();} else {window.clearTimeout(wordTimeout);wordTimeout = null;}}, 300)}autoWord();</script>
</body>
6、结语
我们一年又一年的生活着,很多时候觉得没有压力,甚至也不知道自己未来应该做点什么。就像这个递归函数,只是被一些人控制着,周而复始,我们甚至忘记了思考。
有时候需要一个阈值,停下来让我们想一想,可能你还是没有想到什么,那记得来和我交流哦,我们一起想
学习JS,实现自动打字机动效相关推荐
- html打字并自动滚动效果,js实现键盘自动打字效果
content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale= ...
- 学习js,尝试写一个表单验证框架(1)-规划
斗胆放到首页来,如果不合适的话就删了吧,谢谢 其实这个框架也已经写了一点了,但是越写越乱越没把握,最终决定写成博客的形式,强迫自己慢下步调,一点点仔细地规划,设计,思考,期间也一定会遇到不少问题,还请 ...
- node.js require 自动执行脚本 并生成html,利用node.js实现自动生成前端项目组件的方法详解...
本文主要给大家介绍了关于利用node.js实现自动生成前端项目组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 脚本编写背景 写这个小脚本的初衷是,项目本身添加一个组件太 ...
- js中当等于最小值是让代码不执行_网页中JS函数自动执行常用三种方法
本文为大家分享了在网页中JS函数自动执行常用方法,供大家参考,具体内容如下 一.JS方法 1.最简单的调用方式,直接写到html的body标签里面: 2.在JS语句调用: function myfun ...
- java xml 画表格_用js+xml自动生成表格的东西
摘要:这篇JavaScript栏目下的"用js+xml自动生成表格的东西",介绍的技术点是"JS+XML.自动生成.XML.生成.js.自动",希望对大家开发技 ...
- C语言编一个金山打字通小游戏,js实现金山打字通小游戏
本文实例为大家分享了js实现金山打字通小游戏的具体代码,供大家参考,具体内容如下 字母匀速随机下落,键盘按下对应字母按键,字母消失重新生成新字母,新字母可帮助回调一部分初始高度 效果 1.页面内容 列 ...
- Vue+Electron学习系列 (三) -- 自动更新
Vue+Electron学习系列 1️⃣Vue+Electron学习系列 (一) -- 初识 2️⃣ Vue+Electron学习系列 (二) -- 打包发布 3️⃣ Vu ...
- D3.js地图打点射线动效(结合snap.js)
D3.js地图打点射线动效 在项目中,通常使用打点和射线来实现区域的攻防.传达.运动等需求, 最终效果 width="100%" height="600" sr ...
- 从零开始Web自动化(三):通过selenium,9行代码实现打字网站的自动打字
写在前面: 这个专栏主要是分享一些python.Web自动化的相关知识. 需要你具备一定的python基础,参考教程:廖雪峰python教程 掌握红框中的内容即可! 通过实战项目让你学会包括:pyth ...
最新文章
- 15 sql base line 工作机制
- DL之BP:利用乘法层/加法层(forward+backward)算法结合计算图(CG)求解反向求导应用题
- qrp文件如何用excel打开_问与答66: 如何不打开Excel文件删除行?
- [libGDX游戏开发教程]使用libGDX进行游戏开发(12)-Action动画
- 数据库为date型,而前端要显示String型,问题解决
- python网络爬虫(三)数据抓取
- MySQL下bin-log的三种模式(ROW、Statement、Mixed)
- 如何获取web视频数据流的传输?小姐姐的视频都被我爬下来了,这谁顶得住
- .NET实现在Word指定页码之间插入另一个Word
- oracle odac 配置,.Net項目中通過ODAC方式鏈接Oracle數據庫相關配置
- Python3 多种方式爬取最新30期双色球历史数据存入csv
- 选取销售订单开发票,控制销售订单中已开票金额
- 腾讯视频没有了html分享代码,腾讯视频代码在哪里 腾讯视频嵌入网页的方法-电脑教程...
- SQLServer CTE 递归查询
- 加速更新DNS解析记录的方法
- 恢复和去除时间(Recovery and Removal Time)
- 向幼儿群体提供实用的少儿编程
- nginx: [emerg] open() /var/run/nginx/nginx.pid failed (2: No such file or directory)解决方法
- Tomcat指定war包路径部署
- JS十六进制,CRC冗余,小程序发送蓝牙数据,十六进制GBK编码转换等
热门文章
- 揭秘腾讯研究院:三分之二精力打造免费产品
- 诛仙哪里炼器服务器最稳定,诛仙炼器轻松+11最强攻略
- java/php/net/python互联网 智慧云诊所管理系统设计
- Zabbix 3.2 课程精讲-庄博-专题视频课程
- todo清单项目开发,todo清单不止是简单的勾选,还能做更多事情
- Compound Words
- 10个python接私活的平台,整整10个,总有适合你的,你有技术就有钱
- 智能合约(Smart contract)
- 2023最新SSM计算机毕业设计选题大全(附源码+LW)之java智能线上教育mo0l5
- KEIL封装lib库文件