前言
前几天遇到一个需求,产品告诉我说,希望这些字可以像自动打字那样,一个一个的出来,于是在完成需求的同时,顺便把这个方法记录出来,看大家是否也需要。
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实战例子之实现自动打字机动效的文章就介绍到这了,更多相关JS自动打字机动效内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!