JavaScript實(shí)現(xiàn)計(jì)數(shù)器基礎(chǔ)方法

更新時(shí)間：2022年09月01日 14:58:07 作者：Cl_Daisy

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)計(jì)數(shù)器的基礎(chǔ)方法
，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)計(jì)數(shù)器的具體代碼，供大家參考，具體內(nèi)容如下

通過(guò)使用 JavaScript，設(shè)定的時(shí)間間隔之后來(lái)執(zhí)行代碼，而不是在函數(shù)被調(diào)用后立即執(zhí)行。稱之為計(jì)時(shí)事件。

在 JavaScritp 中使用計(jì)時(shí)事件是很容易的，兩個(gè)關(guān)鍵方法是:

setInterval() - 間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼。
setTimeout() - 暫停指定的毫秒數(shù)后執(zhí)行指定的代碼

Note: setInterval() 和 setTimeout() 是 HTML DOM Window對(duì)象的兩個(gè)方法。在這里只介紹了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)建計(jì)時(shí)器，在指定周期內(nèi)循環(huán)執(zhí)行
        t = setTimeout("timedCount()", 1000);
      }

      function stopCount() {
        //清除計(jì)時(shí)器
        clearTimeout(t);
      }
    </script>
  </head>

  <body>

    <form>
      <input type="button" value="開(kāi)始計(jì)時(shí)！" onClick="timedCount()">
      <input type="text" id="txt">
      <input type="button" value="停止計(jì)時(shí)！" onClick="stopCount()">
    </form>

  </body>

</html>

效果：

點(diǎn)擊開(kāi)始則會(huì)從0開(kāi)始計(jì)數(shù)，停止計(jì)時(shí)則會(huì)暫停在那個(gè)時(shí)刻，再點(diǎn)擊開(kāi)始則會(huì)繼續(xù)累加計(jì)數(shù)...但是這個(gè)程序有一個(gè)小bug，當(dāng)不停的點(diǎn)擊開(kāi)始計(jì)時(shí)，計(jì)時(shí)的速度會(huì)增加，而且點(diǎn)擊一次停止計(jì)時(shí)不會(huì)停止，要響應(yīng)的點(diǎn)擊很多次才可以停止.....

您可能感興趣的文章:

相關(guān)文章

JavaScript判斷奇偶數(shù)的2種方法代碼舉例
這篇文章主要給大家介紹了關(guān)于JavaScript判斷奇偶數(shù)的2種方法,奇數(shù)和偶數(shù)的判斷是數(shù)學(xué)運(yùn)算中經(jīng)常碰到的問(wèn)題,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-10-10
TypeScript接口和類型的區(qū)別小結(jié)
在 TypeScript 中，有兩種主要的定義自定義類型的方式，接口和類型，盡管它們?cè)谕庥^上可能相似，但它們之間有一些關(guān)鍵的區(qū)別，本文就詳細(xì)的介紹一下，感興趣的可以了解下
2023-05-05
js類的繼承定義與用法分析
這篇文章主要介紹了js類的繼承定義與用法,結(jié)合實(shí)例形式分析了javascript關(guān)于類的定義與繼承的相關(guān)使用技巧,需要的朋友可以參考下
2019-06-06
動(dòng)態(tài)添加js事件實(shí)現(xiàn)代碼
動(dòng)態(tài)添加js事件，主要是不用具體指定位置的事件，這種動(dòng)態(tài)添加事件的方法比較方便，并可以擴(kuò)展等。
2009-03-03
JS文件上傳時(shí)如何使用MD5加密
這篇文章主要介紹了JS文件上傳時(shí)如何使用MD5加密，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
通過(guò)JavaScript使Div居中并隨網(wǎng)頁(yè)大小改變而改變
自己的頁(yè)面太難看了，要居中沒(méi)居中，要顏色沒(méi)顏色，但是無(wú)論是怎么樣都得使登錄的框居中吧，下面與大家分享下通過(guò)JavaScript可以簡(jiǎn)單的使Div在頁(yè)面上居中，隨著網(wǎng)頁(yè)大小的改變做出相應(yīng)的改變
2013-06-06
從零搭一個(gè)自用的前端腳手架的方法步驟
這篇文章主要介紹了從零搭一個(gè)自用的前端腳手架的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
js實(shí)現(xiàn)搜索欄效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)搜索欄效果，以及焦點(diǎn)問(wèn)題的解決，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
這篇文章主要介紹了JS表格組件神器bootstrap table，bootstrap table界面采用扁平化的風(fēng)格，用戶體驗(yàn)比較好，更好兼容各種客戶端，需要了解更多bootstrap table的朋友可以參考下
2015-12-12
swiper插件自定義切換箭頭按鈕
這篇文章主要為大家詳細(xì)介紹了swiper插件自定義切換箭頭按鈕，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-12-12