JS實現可暫停秒錶計時器的效果（圖文詳解）

JavaScript是前端開發中不可或缺的一部分，很多效果的實作離不開JS，正在學習JavaScript的小夥伴，你會用JS製作秒錶計時器嗎？這篇文章就和大家如何用JS實現秒錶計時器的效果，並且點擊按鈕可以停止計時，最後將js秒錶計時器的程式碼分享給大家，有興趣的朋友可以參考借鏡。

用JS寫可停止的秒錶計時器需要用到很多JavaScript知識，比如點擊事件，function，if函數等等，如有不清楚的同學可以參考PHP中文網的相關文章，或者訪問JavaScript影片教學，一定要把基礎學好啊！

實例詳解：如何用JavaScript製作秒錶計時器，可以點選按鈕停止計時。

HTML部分：

在form表單中，用input建立一個開始計時按鈕（點擊按鈕開始計時，時間以秒為單位），一個停止按鈕（點擊可停止計時），一個文字方塊（用於顯示時間），具體程式碼如下：

<form>
   <input type="button" value="开始计时!" onclick="start()" />
   <input type="text" id="txt" />
   <input type="button" value="停止!" onclick="stop()" />
</form>
<p>单击开始计时按钮，输入框将从0开始一直计时。以秒计算</p>
<p>单击停止按钮，停止计时，再次点击开始按钮，又再次开始计时。</p>

JavaScript部分：

頁面已經建置好了，接下來用JavaScript讓其實現效果。分別給開始按鈕和停止按鈕一個點擊事件，當點擊停止後，計時暫停（停止後時間不清零），用setTimeout設定計時單位為秒，具體代碼如下：

var c=0;
  var t;
  var timer_is_on=0;
  function timedCount(){
   document.getElementById('txt').value=c;
   c=c+1;
   t=setTimeout(function(){timedCount()},1000);
  }
  function start(){
   if (!timer_is_on){
    timer_is_on=1;
    timedCount();
   }
  }
  function stop(){
   clearTimeout(t);
   timer_is_on=0;
  }

效果圖：

JavaScript秒錶計時器的效果如上圖所示，以上只截了一張圖，大家可以動手嘗試，看看你的程式碼能不能實現計時的效果，教學介紹比較詳細，希望可以幫助你！

更多相關教學請造訪 JavaScript中文參考手冊

#

以上是JS實現可暫停秒錶計時器的效果（圖文詳解）的詳細內容。更多資訊請關注PHP中文網其他相關文章！