JavaScript 字元逐個輸出效果

antzone發表於2018-01-03
JavaScript字元

使用鍵盤打字的時候，字元會螢幕上逐個輸出。

下面通過例項程式碼介紹一下利用JavaScript實現字元逐個輸出效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript"> 
function Reader(content,cID,stopID,continueID){ 
  this.conLoad=document.getElementById(cID); 
  this.stopBtn=document.getElementById(stopID); 
  this.continueBtn=document.getElementById(continueID); 
  this.content=content; 
  this.index=0; 
  var t=this; 
  this.stopBtn.onclick=(function(){ 
    return function(){ 
      t.stopReader(t); 
    }; 
  })(t);
   
  this.continueBtn.onclick=(function(){ 
    return function(){ 
      t.continueReader(t); 
    }; 
  })(t); 
} 
 
Reader.prototype={ 
  startReader:function(){ 
    var t = this; 
    t.toId=setInterval(function(){ 
      if(t.content[t.index]){ 
        t.conLoad.innerHTML+=t.content[t.index]; 
      } 
      t.index++; 
      if(t.content.length==t.index){ 
        clearInterval(t.toId); 
        t.conLoad.innerHTML; 
      } 
    }, 200); 
  }, 
  stopReader:function(t){ 
    t.flag=true; 
    clearInterval(t.toId); 
  }, 
  continueReader:function(t){ 
    if(t.flag){
      t.startReader(); 
    } 
    t.flag=false; 
  } 
}; 
var content="螞蟻部落歡迎您，只有努力奮鬥才會有美好的明天。"; 
window.onload=function(){ 
  new Reader(content,"content","btnStop","btnContinue").startReader(); 
}; 
</script> 
<body> 
<div id='content'></div> 
<div id='operate'>
  <input type="button" id='btnStop' value="暫停"/>
  <input type="button" id='btnContinue' value="繼續"/>
</div> 
</body> 
</html>

程式碼實現了我們的要求，能夠實現字串文字逐個輸出效果，下面詳細介紹一下它的實現過程。

一.程式碼註釋：

（1）.function Reader(content,cID,stopID,continueID){}，宣告一個函式，被用作建構函式，content是要逐個輸出字元的字串，cID是要顯示字串的元素的id屬性值，stopID是暫停按鈕的id屬性值，continueID是繼續按鈕的id屬性值。

（2）.this.conLoad=document.getElementById(cID)，獲取顯示字串的元素物件。

（3）.this.stopBtn=document.getElementById(stopID)，獲取停止按鈕物件。

（4）.this.continueBtn=document.getElementById(continueID)，獲取繼續按鈕物件。

（5）.this.content=content，將字串賦值給變數content。

（6）.this.index=0，將index屬性的初始值設定為0，index將用作字串中字元的索引。

（7）.var t=this，將物件的引用賦值給t，這一點很重要，否則當點選按鈕觸發事件執行事件處理函式的時候，就會出現找不到stopReader()和continueReader()函式的錯誤，因為如果是this.stopReader()或者this.continueReader()的話，this是指向按鈕物件的，而這兩個函式都是屬於new Reader()物件的。

（8）.this.stopBtn.onclick=(function(){      

    return function(){        

   t.stopReader(t);      

};    

  })(t); 

註冊事件處理函式，這裡是利用匿名函式返回一個函式物件的方式。

（9）.this.continueBtn.onclick=(function(){      

    return function(){        

   t.continueReader(t);      

};   

})(t); 

和上面是同樣的道理，就不用再多說了。

（10）.Reader.prototype={}，這裡是重寫了原型物件，儘可能的修改而不是重寫原型。

（11）.startReader:function(){)，此函式可以用來挨個輸出字元。

（12）.var t = this，將物件的引用賦值給變數t，道理其實和上面介紹的一樣。

（13）.t.toId=setInterval(function(){},200)，利用定時器函式每隔200毫秒輸出一個字元。

（14）.if(t.content[t.index]){t.conLoad.innerHTML+=t.content[t.index]},如果當前索引位置存在字元，則將元素中的內容累加，這樣就出現了打字機效果。

（15）.t.index++，索引加1。

（16）.if(t.content.length==t.index){

  clearInterval(t.toId); 

  t.conLoad.innerHTML;

}

如果index值等於字串的長度，那麼就停止定時器函式的執行，也就是字串已經輸出完畢。

（17）.stopReader:function(t){ 

    t.flag=true; 

    clearInterval(t.toId); 

  }

暫停按鈕的事件處理函式。

（18）.continueReader:function(t){ 

    if(t.flag){

      t.startReader(); 

    } 

    t.flag=false; 

} 

繼續按鈕的事件處理函式。

二.相關閱讀:

（1）.this參閱JavaScript this一章節。

（2）.建構函式參閱JavaScript 建構函式一章節。 

（3）.物件原型參閱JavaScript prototype原型一章節。 

（4）.setInterval()參閱JavaScript setInterval()一章節。 

（5）.clearInterval()參閱window.clearInterval()一章節。 

相關文章