頁面中的文字，逐個顯示在頁面；由於電腦的配置較低，錄制的視頻相對來說比較卡頓
思路：
用一個定時器將預制的文字通過字符串截取.substring(0, i)方法不斷的賦給要顯示的區域，i在定時器里面迭代累加，當預制的文字跟顯示區的文字相同時，清除定時器。
代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>動起來的文字</title> 6 <style> 7 .page{ 8 width: 500px; 9 } 10 11 </style> 12 <script type="text/javascript" src="js/tween.js"></script> 13 <script type="text/javascript" src="js/animation.js"></script> 14 </head> 15 <body> 16 <div class="page"> 17 <h1 class="page2-title">公司介紹</h1> 18 <p class="li-none" id="page2Txt"> 19 深圳達農保險經紀有限公司成立於2016年5月，總部設立於深圳，立足打造農村互聯網保險平台，首期注冊資本5000萬人民幣，是諾普信農化股份有限公司控股的保險經紀服務商。達農保險將一直秉持“保險基於需求”的理念，以國家農業現代化的發展趨勢為導向，積極發揮保險經紀金融工具的特有優勢，以創新的模式，深入三農，為農業的現代化發展提供保障。展望未來，達農保險將以金融手段持續附着產業共同發展。 20 </p> 21 <div class="el-page2 li-none"> 22 23 <p class="fenge-solid"></p> 24 <p class="page2-txt" id="page2TxtShow"></p> 25 </div> 26 </div> 27 <script> 28 var page2Txt = document.getElementById('page2Txt'), 29 page2TxtShow = document.getElementById('page2TxtShow'), 30 i = 0; 31 /*timer = setInterval(function(){ 32 page2TxtShow.innerHTML = page2Txt.innerHTML.substring(0, i); 33 i++; 34 if(page2TxtShow.innerHTML == page2Txt.innerHTML){ 35 clearInterval(timer); 36 }; 37 },60);*/ 38 var timer = null; 39 timer = setInterval(function(){ 40 page2TxtShow.innerHTML = page2Txt.innerHTML.substring(0,i); 41 i++; 42 if (page2TxtShow.innerHTML == page2Txt.innerHTML) { 43 clearInterval(timer); 44 } 45 },100); 46 /*Math.animation(document.documentElement.scrollTop, 0, function (value) { 47 document.documentElement.scrollTop = value; 48 }, 'Quart.easeOut', 600);*/ 49 </script> 50 </body> 51 </html>
關於String 對象的知識點總結：
substring() 方法
定義與用法：
substring() 方法用於提取字符串中介於兩個指定下標之間的字符。
語法：stringObject.substring(start,stop)
返回值
一個新的字符串，該字符串值包含 stringObject 的一個子字符串，其內容是從 start 處到 stop-1 處的所有字符，其長度為 stop 減 start。
注意：substring() 方法返回的子串包括 start 處的字符，但不包括 stop 處的字符。與 slice() 和 substr() 方法不同的是，substring() 不接受負的參數。其用法類似
如果參數 start 與 stop 相等，那么該方法返回的就是一個空串（即長度為 0 的字符串）
//eg.script中的代碼
var str="Hello world!"
document.write(str.substring(3,7))
slice() 方法
substr() 方法與slice()方法類似
String常用方法
使用說明可通過w3c school 查詢