今天突發奇想，js能不能通過字符串和定時器來實現遊戲中的對話效果呢。

試了一下，還真挺好玩的。

上效果圖：

本節涉及的知識點：

• 字符串的charAt方法
• js定時器setInterval（輪詢）

1. charAt方法

js的charAt方法是用來獲取字符串中的某一個字符的，它是屬於string的一個方法。

比如：

var str = 'ABCDEFG';
var a = str.charAt(6);//取下標爲6的字符
alert(a);

Paste_Image.png

2. setInterval定時器

具體用法如下：

setInterval(function(){
 
},1000);

第一個參數是一個回調函數，代表了你要做的事情。

第二個參數是延時的時間，代表了每隔多長時間就觸發一次函數裏邊的內容。

注意：js是單線程的，它沒有像JAVA語言那樣的sleep方法。在js中任何的動畫效果，基本上都要通過 setInterval 或者 setTimeout來實現。

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：

效果圖：

圖片素材我是隨便去網上截取的。

4. js實現打印機效果

我們可以通過定時器來實現一個延時，比如現在我有一個字符串：

var str = "Hello World！"

在body區域，我有一個div用來輸出文字。

如果你用for循環，雖然能依次打印，但這樣是看不到動畫效果的。

var str = "Hello World！"
var text = document.getElementById('text');
for(var i = 0; i < str.length; i++){
 text.innerHTML += str.charAt(i);
}

在不知道setInterval之前，我曾經天真的以爲，可以使用單片機中C語言的軟件延時方法，也就是在for循環裏面增加一個無意義的循環操作來消磨cpu的時間，以達到延時的目的。

後來我發現在js中根本不是那麼回事，其實，js的for循環是一口氣執行好了，再展示給你的。

所以，如果你想通過for循環來達到延時的目的應該是不可能的。

好在js給我們提供了一個setInterval的輪詢方法，我們可以通過這個方法來達到文字的動畫效果。

代碼如下：

window.onload = function(){
 var innerBox = document.getElementsByClassName('innerBox')[0];
 var text = 'JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。天空，你也要好好學習呀！';
 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.當最後一個字符也遍歷完了，繼續進入輪詢的時候，就清除定時器。

效果（截圖原因看起來有點卡頓，其實是非常流暢的哦）：