JS實現可暫停秒表計時器效果的方法

發(fā)布時間：2020-10-22 14:35:00

來源：億速云

閱讀：122

作者：小新

這篇文章給大家分享的是有關JS實現可暫停秒表計時器效果的方法的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

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

實例詳解：如何用JavaScript制作秒表計時器，并且可以點擊按鈕停止計時。

HTML部分：

在form表單中，用input創(chuàng)建一個開始計時按鈕(點擊按鈕開始計時，時間以秒為單位)，一個停止按鈕(點擊可停止計時)，一個文本框(用于顯示時間)，具體代碼如下：

單擊開始計時按鈕，輸入框將從0開始一直計時。以秒計算

單擊停止按鈕，停止計時，再次點擊開始按鈕，又再次開始計時。

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;

}

效果圖：

感謝各位的閱讀！關于JS實現可暫停秒表計時器效果的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

總結

以上是生活随笔為你收集整理的html暂停计时器,JS实现可暂停秒表计时器效果的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。