|
阅读：3066回复：0
利用定时器实现自动打字机并实现循环播放
一. 实现思路
首先这个需求的目的是实现自动打字机效果，意思就是文字会一个一个出来，而且文字的最终显示提前已经固定，或者是已经获取完成了； 然后就需要每次将文字字符串拆开，每次比上一次多显示一个文字，并且清除掉上一次的显示； 每次累加要显示的文字，必定有个累加的过程，这里就需要用到递归显示，而递归的重要点在于阈值停止，所以累加的索引和字符串的长度应该有一个判断，以停止继续执行递归， 再重新初始化变量来进行循环打字效果；
二. 定义变量
//创建一个字符串
let wordStr = '新年快乐！恭喜发财！大吉大利！兔年吉祥！！！';
let wordDom = document.querySelector('.word');
//初始化
let num = 0; //记录没打出一个字下标
let word = null;
let wordLength = wordStr.length; //获取字符串长度
let showWord = '';//定义一个空数组
三. 打字过程 既然是打字效果，定义的字符串是“新年快乐！恭喜发财！大吉大利！兔年吉祥！！！！已经放假了大家就少卷一点”，所以显示过程肯定是：第一次显示“新”，第二次显示“新年”，第三次显示“新年快”，以此类推，通过上一步预定义的num值累加，最终将字符串全部显示出来，所以第一步代码应该是：
word = setTimeout(() => {
showWord += wordStr.charAt(num);
wordDom.innerHTML = showWord;
num++;
autoWord(); //递归调用
因为需要让它自动重复播放所以我们需要判断它的打字是否已经结束，所以我们需要加一个if 来判断num是否<字符串长度 来停止递归,如果num >= 字符串长度的话就重新初始化变量重新开始； if (num < wordLength) {
autoWord(); //递归调用
} else {
//初始化变量，实现让他循环播放
window.clearTimeout(word);
word = null;
num = 0;
showWord = "";
return autoWord();}
四. 完整代码 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>自动打字机</title> <style> * { margin: 0; padding: 0; }
body { background: rgb(255, 0, 0); }
.word { margin: 300px auto; width: 950px; height: 50px; padding: 2px 10px; font-size: 40px; color: #FFF; font-weight: 800; text-shadow: 0 0 3px rgb(0, 0, 0); } </style> </head><body><div class="word"></div> <script> var wordStr = '新年快乐！恭喜发财！大吉大利！兔年吉祥！！！！已经放假了大家就少卷一点';//创建一个字符串 var wordDom = document.querySelector('.word'); //初始化 var num = 0; var word = null; var wordLength = wordStr.length; //获取字符串长度 var showWord = '';
function autoWord() { word = setTimeout(() => { showWord += wordStr.charAt(num); wordDom.innerHTML = showWord; num++;
if (num < wordLength) { autoWord(); //递归调用 } else { //初始化变量，实现让他循环播放 window.clearTimeout(word); word = null; num = 0; showWord = ""; return autoWord(); } }, 300) } autoWord();
</script> </body> |
|
公众号
