为了更好的给同学们讲解课程内容,今天在整理笔记(突然发现我特么太敬业了,放暑假都不忘工作,哭个先...)。
为了演示某个案例,做了一个页面打字效果,觉得甚为有趣,就记录下吧。
html结构如下:
<div id="main">
<div id="cont">
<p>想你的时候,我的眼里总会模糊,当思念在一个又一个黑夜降临,当牵挂在一个又一个瞬间不期而至,我才发现你的名字早已填满了我的记忆和我生活的空间。</p>
<p>想你的时候,我强迫自己喝下一整瓶的酒,把自己放倒,让思维停止,让思念停止,可醒来后,想你的梦依旧在延续,我才知道原来你的影子早已映刻在我的心房。</p>
</div>
</div>
样式随便写,只要不反人类,我的样式如下,仅供参考:
/* CSS Document */
body{
font-size:14px;
color:#5ebcdb;
text-align:center;
line-height:24px;
background:#1a3e4a;
}
#main{
text-align:left;
width:509px;
height:385px;
padding-top:24px;
background:#1a3e4a url(../images/love2.jpg) no-repeat bottom right;
margin-left: auto;
margin-right: auto;
}
#cont{
width:300px;
writing-mode:tb-rl;
}
#cont p{
text-indent:20px;
margin-bottom: 140px;
letter-spacing: 1px;
}
关键的JavaScript来了。
实现打字机主要思路,就是让文字一个一个的出现。
出现一个再出现下一个。肯定要用到循环,但是不能是for,或者 while,因为文字会在瞬间全部展示出来,没有打字的延迟。
所以,想到了用递归。BTW,递归也是循环的一种哦。
考虑到段落很多,所以,要把段落的文字全部提出来,把每个文字独立出来--转为数组元素。再挨个展示文字就行了。
let cont = document.getElementById("cont");
let p = cont.getElementsByTagName("p"); // 获取所有段落
let txtArr = []; // 文字数组。这个是个二维数组,每个元素都是一个段落的文字数组。
let nowp = 0 ; // 当前展示的段落
for(let i=0 ; i <= p.length-1 ; i++){
let txt = p[i].innerHTML.split(""); // 把段落文字转为数组元素。
txtArr.push(txt); // 把当前段落文字数组,放入 txtArr 中。
p[i].innerHTML = ""; // 清空段落
}
let letter = txtArr[nowp].shift(); // 抽取第一个段落的第一个字符
let showTextFun = function(){
if( !letter){ // 如果letter为空,说明一个段落的文字完毕。
nowp++; // 开始下一个段落
if( nowp>=txtArr.length){ // 如果段落全部走完
return false; // 终止递归调用
}
letter = txtArr[nowp].shift(); // 抽取段落的第一个字符
}
p[nowp].innerHTML += letter ;
letter = txtArr[nowp].shift();
setTimeout(showTextFun,100); // 递归调用自己
};
showTextFun();
具体思路都在注释里了,不足之处,留言交流~
效果如下,为了图片小点,就截图半截。