今日对文字一个一个显示出来的特效给吸引，决定用原生的给实现出来，实现运用到的substring方法、setInterval计时器、clearInterval、css样式、pre标签等；
基本原理：
1）substring作用是截取字符串，把截取的字符串传给指定的DOM元素；
2）为了保证每次截取的字符串不同，因此需要用到setInterval计时器；考虑到setInterval计时器有个缺点就是停不下来；
3）这时clearInterval该上场了，clearInterval作用(当setInterval计时器次数=字符串的长度时，调用clearInterval停止计时)；
4）本文运用的pre标签，预格式化文本，个人感觉比较好用的一个标签；
5）总体来说一个小特效，Hope to help you.
废话不多说，直接上代码；
一、html代码区
<div class="prebox">
<pre id="text2"></pre>
</div>
<div style="display:none" id="text">
乡愁
小时候
乡愁是一枚小小的邮票
我在这头
母亲在那头
长大后
乡愁是一张窄窄的船票
我在这头
新娘在那头
后来啊
乡愁是一方矮矮的坟墓
我在外头
母亲在里头
而现在
乡愁是一湾浅浅的海峡
我在这头
大陆在那头
</div>
二、css代码区
<style>
body{
width: 100vw;
height: 100vh;
background-image: url("img/dome.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 0 0;
overflow: hidden;
}
.prebox{
margin: 0px 126px;
padding: 10px 30px;
width: 128px;
height: 322px;
background: rgba(255,255,255,.1);
border-radius: 2px;
box-shadow: 1px 2px 10px -5px #000;
}
pre{
color: #ffffff87;
width: 100%;
height: 100%;
}
</style>
三、js代码区
<script type="text/javascript">
var index = 0;//用来计数
var text = document.getElementById("text").innerHTML;
function dome(){
document.getElementById("text2").innerText = text.substring(0,index++);//截取字符串substring
//判断计数的长度是否等于文本的长度，等于的时候则用clearInterval停止setInterval计时器
if(index == text.length){
clearInterval(time);
}
}
//声明一个变量，变量的作用是用来控制setInterval计时器
var time = setInterval(dome,200);
</script>
四、效果图展示
dome.png
五、其他
声明：文章采用的余光中先生的《乡愁》
背景图片来源：网络
