DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> javascript 秒表計時器實現代碼
javascript 秒表計時器實現代碼
編輯:JavaScript基礎知識     

javascript 秒表計時器

實例代碼:

<html lang="en">
<head>
<meta charset="UTF-8">
<title>js計時器</title>
</head>
<body>
<input type="text" value="00:00">
<input type="button" value="開始">
<input type="button" value="結束">
<input type="button" value="重置">
<script>

  var oTxt=document.getElementsByTagName("input")[0];
  var oStart=document.getElementsByTagName("input")[1];
  var oStop=document.getElementsByTagName("input")[2];
  var oReset=document.getElementsByTagName("input")[3];
  var n= 0, timer=null;
  //開始計時
  oStart.onclick= function () {
    clearInterval(timer);
    timer=setInterval(function () {
      n++;
      var m=parseInt(n/60);
      var s=parseInt(n%60);
      oTxt.value=toDub(m)+":"+toDub(s);
    },1000/60);
  };
  //暫停並且清空計時器
  oStop.onclick= function () {
    clearInterval(timer);
  }
  //重置
  oReset.onclick= function () {
    oTxt.value="00:00";
    n=0;
  }
  //補零
  function toDub(n){
    return n<10?"0"+n:""+n;
  }
</script>
</body>
</html>

在計時器設置運行間隔那裡,一開始設置了100,其實是不對的,因為 1秒=1000毫秒;我們要分成60個數字來顯示,所以還是要除以60才對。

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved