jQuery模擬打字機詳解

admin發表於2018-12-02
jQuery

分享一段程式碼例項，它實現了模擬打字機輸出文字的功能。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$.fn.autotype = function() {
  var $text = $(this);
 
  var str = $text.html();
  var index = 0;
  var x = $text.html('');
 
  var timer = setInterval(function() {
    var current = str.substr(index, 1);
    if (current == '<') {
      index = str.indexOf('>', index) + 1;
    } else {
      index++;
    }
 
    $text.html(str.substring(0, index) + (index & 1 ? '_' : ''));
    if (index >= str.length) {
      clearInterval(timer);
    }
  }, 100);
};
$(document).ready(function() {
  $("#autotype").autotype();
})
</script>
</head>
<body>
  <div class="autotype" id="autotype">
    <p>螞蟻部落歡迎您，本站的url地址是www.softwhy.com</p>
    <br />
    <p>本站專注於前端知識的分享</p>
    <p>只有努力奮鬥才會有美好的未來</p>
    <br />
    <p>分享的精神和互助的胸懷是進步的最大源動力</p>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，下面就對實現過程進行詳細的介紹。

一.程式碼註釋:

（1）.$.fn.autotype = function() {}，為jquery例項物件新增一個autotype方法。

（2）.var $text = $(this)，獲取當前元素物件。

（3）.var str = $text.html()，獲取元素物件中的html內容。

（4）.var index = 0，宣告一個變數並賦值為0，用法會在後面介紹。

（5）.var x = $text.html('')，將元素物件中的內容清空。

（6）.var timer = setInterval(function() {},100)，每隔100毫秒執行一次回撥函式，這是實現打字機效果的核心。

（7）.var current = str.substr(index, 1)，擷取一個html字串中的一個字元。

（8）.if (current == '<') ，如果字元是<，那麼就說明一個標籤的開始。

（9）.index = str.indexOf('>', index) + 1,獲取與其匹配最近的一個>的位置的下一個位置。

（10）.else {

  index++;

}，否則的話索引值加1。

第九步和第十部的目的就是如果遇到標籤，那麼就不會輸出標籤字串，如果是遇到的普通字母就輸出。

（11）.$text.html(str.substring(0, index) + (index & 1 ? '_' : '')),將擷取的指定的html字串寫入元素，在每一個字元的尾部新增一個下劃線。

（12）. if (index >= str.length) {

  clearInterval(timer);

}，如果索引大於等於字串長度，那麼就說明已經完全將字串輸出。

二.相關閱讀:

（1）.$.fn可以參閱$.fn作用簡單介紹一章節。

（2）.html()可以參閱jQuery html()一章節。

（3）.setInterval()可以參閱window.setInterval()一章節。

（4）.substr()可以參閱javascript substr()一章節。

（5）.indexOf()可以參閱javascript indexOf()一章節。

（6）.clearInterval()可以參閱clearInterval() 方法一章節。

相關文章