今天突發(fā)奇想，js能不能通過字符串和定時器來實現(xiàn)游戲中的對話效果呢。試了一下，還真挺好玩的。
上效果圖：
本節(jié)涉及的知識點：
- 字符串的charAt方法
- js定時器setInterval（輪詢）
1. charAt方法
js的charAt方法是用來獲取字符串中的某一個字符的，它是屬于string的一個方法。
比如：
var str = 'ABCDEFG';
var a = str.charAt(6);//取下標為6的字符
alert(a);
2. setInterval定時器
具體用法如下：
setInterval(function(){
},1000);
第一個參數(shù)是一個回調(diào)函數(shù)，代表了你要做的事情。
第二個參數(shù)是延時的時間，代表了每隔多長時間就觸發(fā)一次函數(shù)里邊的內(nèi)容。
注意：js是單線程的，它沒有像JAVA語言那樣的sleep方法。在js中任何的動畫效果，基本上都要通過 setInterval 或者 setTimeout來實現(xiàn)。
3. 繪圖
css:
* {margin:0;padding:0}
body {
background: url(bg.jpg) no-repeat;
background-size: 100%;
}
.dialog {
width:100%;
height:100px;
background:rgba(136,180,251,0.5);
position:absolute;
bottom: 0;
}
.dialog .pic {
width:60px;
height:60px;
background:url(1.png) no-repeat;
background-size: 100%;
display:inline-block;
position: absolute;
top:16px;
left:16px;
border-radius: 5px;
}
.dialog .innerBox{
width:90%;
height:80px;
border:2px solid #dcc0a5;
opacity: 0.8;
left:85px;
top:10px;
position: absolute;
border-radius: 5px;
font-size: 20px;
font-family: 微軟雅黑;
color:#fff;
text-shadow: 1px -1px 1px #333;
word-wrap:break-word;
padding:2px;
}
html：
<div class='dialog'>
<span class='pic'></span>
<div class='innerBox'></div>
</div>
效果圖：
圖片素材我是隨便去網(wǎng)上截取的。
4. js實現(xiàn)打印機效果
我們可以通過定時器來實現(xiàn)一個延時，比如現(xiàn)在我有一個字符串：
var str = "Hello World！"
在body區(qū)域，我有一個div用來輸出文字。
<body>
<div id='text'></div>
</body>
如果你用for循環(huán)，雖然能依次打印，但這樣是看不到動畫效果的。
var str = "Hello World！"
var text = document.getElementById('text');
for(var i = 0; i < str.length; i++){
text.innerHTML += str.charAt(i);
}
在不知道setInterval之前，我曾經(jīng)天真的以為，可以使用單片機中C語言的軟件延時方法，也就是在for循環(huán)里面增加一個無意義的循環(huán)操作來消磨cpu的時間，以達到延時的目的。
后來我發(fā)現(xiàn)在js中根本不是那么回事，其實，js的for循環(huán)是一口氣執(zhí)行好了，再展示給你的。
所以，如果你想通過for循環(huán)來達到延時的目的應該是不可能的。
好在js給我們提供了一個setInterval的輪詢方法，我們可以通過這個方法來達到文字的動畫效果。
代碼如下：
window.onload = function(){
var innerBox = document.getElementsByClassName('innerBox')[0];
var text = 'JavaScript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。天空，你也要好好學習呀！';
var len = text.length;
var timer = null;
var index = 0;
timer = setInterval(function(){
if(index == len){
clearInterval(timer);
}
innerBox.innerHTML += text.charAt(index++);
},50);
}
思路：
1.新建一個需要動畫展示的文本
2.記錄下當前遍歷的字符位置
3.記錄文本的總長度
4.新建一個定時器timer
5.50ms輪詢，每次輪詢都取文本的下一個字符，添加到innerBox。
6.當最后一個字符也遍歷完了，繼續(xù)進入輪詢的時候，就清除定時器。
效果（截圖原因看起來有點卡頓，其實是非常流暢的哦）：
本章結束 ...
剽悍一小兔，電氣自動化畢業(yè)。
參加工作后對計算機感興趣，深知初學編程之艱辛。
希望將自己所學記錄下來，給初學者一點幫助。
免責聲明： 博客中所有的圖片素材均來自百度搜索，僅供學習交流，如有問題請聯(lián)系我，侵立刪，謝謝。
