js實現文字逐個出現動效

效果

首先看下效果，這是在h5頁面中常見的一中文字展現方式，那么是怎么實現的呢？其實很簡單

思路

用一個定時器將預制的文字通過.substring(0, i)方法不斷的賦給要顯示的區域，i在定時器里面迭代累加，當預制的文字跟顯示區的文字相同時，清除定時器。

核心代碼

html

<div class="page">
    <p class="li-none" id="page2Txt">
    深圳達農保險經紀有限公司成立於2016年5月，總部設立於深圳，立足打造農村互聯網保險平台，首期注冊資本5000萬人民幣，是諾普信農化股份有限公司控股的保險經紀服務商。達農保險將一直秉持“保險基於需求”的理念，以國家農業現代化的發展趨勢為導向，積極發揮保險經紀金融工具的特有優勢，以創新的模式，深入三農，為農業的現代化發展提供保障。展望未來，達農保險將以金融手段持續附着產業共同發展。
    </p>
    <div class="el-page2 li-none">
        <h1 class="page2-title">公司介紹</h1>
        <p class="fenge-solid"></p>
        <p class="page2-txt" id="page2TxtShow"></p>
    </div>
</div>

js

var page2Txt = document.getElementById('page2Txt'),
    page2TxtShow = document.getElementById('page2TxtShow'),
    i = 0,
    timer = setInterval(function(){
    	page2TxtShow.innerHTML = page2Txt.innerHTML.substring(0, i);
        i++;
        if(page2TxtShow.innerHTML == page2Txt.innerHTML){
            clearInterval(timer);
        };
    },60);