其實做法還是很簡單的，主要是用到substring()這個方法，下面先解釋下substring()這個方法的說明及用法：

js官方的解釋：

substring(start,stop) 方法用于提取字符串中介于兩個指定下標之間的字符。

舉個例子：

<div>

? ? <p id="demo">我就是個demo</p>

</div>

<script>

var oTex = document.getElementById('demo');

console.log(oTex.innerHTML.substring(0,2))

</script>

以上例子就可以直觀的看出substring()是可以用于截取字符串內容；

了解了這個我們就很清楚了字體逐漸展開的制作原理了，就是將已有的一段字隱藏，然后用substring()去獲取隱藏的字符串內容，將獲取到的內容逐漸貼到新的便簽里。可能描述的有些簡單，下面舉例說明下：

<div>

<p style="display:none" id="oTex1">

這里面的內容我將逐漸的展開，請拭目以待！！

</p>

<h1>????

? ? ? ? 以下為展示區域

</h1>

<p id="oTex2">

</p>

</div>

<script>

var oTex1 = document.getElementById('oTex1'),

? ? oTex2 = document.getElementById('oTex2'),

? ? i = 0,

? ? timer = setInterval(function(){

? ? oTex2.innerHTML = oTex1.innerHTML.substring(0,i);

? ? i++;

? ? if(oTex2.innerHTML? == oTex1.innerHTML){????

? ? ? ?clearInterval(timer);

};

},60);

</script>

小白第一次寫簡書還是有點蒙，有不對的地方大神還請指出。