JavaScript页面打字效果--适合表白，展现程序员的浪漫

为了更好的给同学们讲解课程内容，今天在整理笔记（突然发现我特么太敬业了，放暑假都不忘工作，哭个先...）。

为了演示某个案例，做了一个页面打字效果，觉得甚为有趣，就记录下吧。

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();

具体思路都在注释里了，不足之处，留言交流~

效果如下，为了图片小点，就截图半截。