javascript能夠回溯的打字機效果程式碼例項

antzone發表於2017-04-13
JavaScript

本章節分享一段程式碼例項，它實現了打字機效果。

當打字完畢之後，還能夠回溯到最初狀態。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
  var i = 1, j = 1, html = '';
  var timer = setInterval(add, 100);
  function add() {
    if (i <= 9) {
      if (j < i) {
        html = '<span>' + j + '*' + i + '=' + j * i + '</span>' + ' ';
      }
      else if (j === i) {
        html = '<span>' + j + '*' + i + '=' + j * i + '</span><br/>';
        i++;
        j = 0;
      }
      j++;
      document.write(html);
    }
    else if (i === 10) {
      var span = document.getElementsByTagName('span');
      if (span.length > 0) {
        span[span.length - 1].remove();
      }
    }
  }
}
</script>
</head>
<body>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

a:3:{s:3:\"pic\";s:43:\"portal/201704/13/093348ygogk8r6jg78giyo.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

從輸出的結果可以看到，被乘數是所在的列，乘數是所在的行。

一.程式碼註釋:

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

（2）.var i = 1, j = 1, html = ''，宣告變數並賦值，後面會用到。

（3）.var timer = setInterval(add, 100)，使用定時器函式每隔100毫秒執行一次add函式。

（4）.function add() {},此函式是實現的核心程式碼。

（5）.if (i <= 9) {}，要輸出九行。

（6）.if (j < i) {

  html = '<span>' + j + '*' + i + '=' + j * i + '</span>' + ' ';

}，j表示列數，i表示行數,如果j小於i，那麼說明當前行還要進行打字效果，比如第三行，就要輸出3列，也就是說如果當前是第n行，那麼此行就具有n列。

（7）.else if (j === i) {

  html = '<span>' + j + '*' + i + '=' + j * i + '</span><br/>';

  i++;

  j = 0;

},如果j等於i，那麼就說明當前行已經輸出完畢，那麼j就要重置為0，因為每一行的輸出都是從第一列開始。

（8）.j++，列數自增。

（9）.document.write(html)，輸出html字串，也就是顯示列印效果。

（10）.else if (i === 10) {

  var span = document.getElementsByTagName('span');

  if (span.length > 0) {

    span[span.length - 1].remove();

  }

}，這個就很簡答了，刪除span元素，也就是回溯效果。

二.相關閱讀:

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

（2）.getElementsByTagName()可以參閱document.getElementsByTagName()一章節。

相關文章