JavaScript實現計數器基礎方法
更新時間：2022年09月01日 14:58:07 作者：Cl_Daisy
這篇文章主要為大家詳細介紹了JavaScript實現計數器的基礎方法
，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現計數器的具體代碼，供大家參考，具體內容如下
通過使用 JavaScript，設定的時間間隔之后來執(zhí)行代碼，而不是在函數被調用后立即執(zhí)行。稱之為計時事件。
在 JavaScritp 中使用計時事件是很容易的，兩個關鍵方法是:
setInterval() - 間隔指定的毫秒數不停地執(zhí)行指定的代碼。
setTimeout() - 暫停指定的毫秒數后執(zhí)行指定的代碼
Note: setInterval() 和 setTimeout() 是 HTML DOM Window對象的兩個方法。在這里只介紹了setTimeout()方法；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var c = 0
var t
function timedCount() {
document.getElementById('txt').value = c;
c = c + 1;
//創(chuàng)建計時器，在指定周期內循環(huán)執(zhí)行
t = setTimeout("timedCount()", 1000);
}
function stopCount() {
//清除計時器
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="開始計時！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止計時！" onClick="stopCount()">
</form>
</body>
</html>
效果：
點擊開始則會從0開始計數，停止計時則會暫停在那個時刻，再點擊開始則會繼續(xù)累加計數...但是這個程序有一個小bug，當不停的點擊開始計時，計時的速度會增加，而且點擊一次停止計時不會停止，要響應的點擊很多次才可以停止.....
相關文章
這篇文章主要給大家介紹了關于JavaScript判斷奇偶數的2種方法,奇數和偶數的判斷是數學運算中經常碰到的問題,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-10-10
在 TypeScript 中，有兩種主要的定義自定義類型的方式，接口和類型，盡管它們在外觀上可能相似，但它們之間有一些關鍵的區(qū)別，本文就詳細的介紹一下，感興趣的可以了解下2023-05-05
這篇文章主要介紹了js類的繼承定義與用法,結合實例形式分析了javascript關于類的定義與繼承的相關使用技巧,需要的朋友可以參考下2019-06-06
動態(tài)添加js事件，主要是不用具體指定位置的事件，這種動態(tài)添加事件的方法比較方便，并可以擴展等。2009-03-03
這篇文章主要介紹了JS文件上傳時如何使用MD5加密，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
自己的頁面太難看了，要居中沒居中，要顏色沒顏色，但是無論是怎么樣都得使登錄的框居中吧，下面與大家分享下通過JavaScript可以簡單的使Div在頁面上居中，隨著網頁大小的改變做出相應的改變2013-06-06
這篇文章主要介紹了從零搭一個自用的前端腳手架的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要為大家詳細介紹了js實現搜索欄效果，以及焦點問題的解決，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
JS表格組件神器bootstrap table詳解（基礎版）
這篇文章主要介紹了JS表格組件神器bootstrap table，bootstrap table界面采用扁平化的風格，用戶體驗比較好，更好兼容各種客戶端，需要了解更多bootstrap table的朋友可以參考下2015-12-12
這篇文章主要為大家詳細介紹了swiper插件自定義切換箭頭按鈕，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12