js原生文字一个一个显示效果

今日对文字一个一个显示出来的特效给吸引，决定用原生的给实现出来，实现运用到的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

五、其他

声明：文章采用的余光中先生的《乡愁》
背景图片来源：网络