jQuery打字機效果程式碼

antzone發表於2018-07-12
jQuery

本章節分享一段程式碼例項，它利用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 type="text/javascript" charset="utf-8">
$(function () {
  $.fn.typewriter = function () {
    this.each(function () {
      var $ele = $(this), str = $ele.html(), sum = 0;
      $ele.html("");
      var timer = setInterval(function () {
        var current = str.substr(sum, 1);
        if (current == '<') {
          sum = str.indexOf('>', sum) + 1;
        } else {
          sum++;
        }
        var curr = str.substr(0, sum);
        $ele.html(curr + (sum & 1 ? '_' : ''));
        if (sum >= str.length) {
          clearInterval(timer);
        }
      }, 50);
    });
    return this;
  };
  $("#code").typewriter();
})
</script>
</head>
<body>
<div id="code">
螞蟻部落歡迎您，本站的url地址是softwhy.com<br/>
只有努力奮鬥才會有美好的未來。<br/>
</div>
</body>
</html>

上面的程式碼實現了打字效果，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(function () {})，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.$.fn.typewriter = function () {}，為jquery自定義例項物件方法。

（3）.this.each(function () {})，遍歷每一個元素物件。

（4）.var $ele = $(this)，each中的this是指向dom元素的，所以要將其轉換為jquery物件。

（5）.str = $ele.html()，獲取元素的html字串。

（6）.sum = 0，宣告一個變數並賦值為0，用作計數器。

（7）.$ele.html("")，清空元素中的內容。

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

（9）.var current = str.substr(sum, 1)，擷取當前位置的字元。

（10）.if (current == '<') {

  sum = str.indexOf('>', sum) + 1;

}，作用是為了實現<br/>換行功能。

如果沒有這段程式碼，那麼就會輸出<、<b、<br..這樣的效果，然後再換行。

（11）.var curr = str.substr(0, sum)，擷取內容。

（12）.$ele.html(curr + (sum & 1 ? '_' : ''))

將內容寫入元素中

sum & 1 ? '_' : ''，這個的作用在打字輸出的時候每隔一個數字，後面會出現一個下劃線。

（13）.if (sum >= str.length) {

  clearInterval(timer);

}，，如果sum的值大於等於字串的數目，那麼就停止打字。

二.相關閱讀：

（1）.$.fn參閱jQuery.fn的作用是什麼一章節。

（2）.html方法參閱jQuery html()一章節。

（3）.setInterval方法參閱JavaScript setInterval()一章節。

（4）.substr方法參閱JavaScript substr()一章節。

（5）.indexOf方法參閱JavaScript string indexOf()一章節。

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

相關文章