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)容如下

通過使用 JavaScript，設(shè)定的時(shí)間間隔之后來執(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="開始計(jì)時(shí)！" onClick="timedCount()">
      <input type="text" id="txt">
      <input type="button" value="停止計(jì)時(shí)！" onClick="stopCount()">
    </form>

  </body>

</html>

效果：

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

您可能感興趣的文章:

相關(guān)文章

JavaScript高階教程之“==”隱藏下的類型轉(zhuǎn)換
這篇文章主要給大家介紹了關(guān)于JavaScript高階教程之“==”隱藏下類型轉(zhuǎn)換的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
javascript中關(guān)于break,continue的特殊用法與介紹
javascript大家所熟知中的for是一個(gè)循環(huán)體，循環(huán)體其中的break和continue也是大家都比較熟悉的功能，相信大家對(duì)它們的用法不會(huì)陌生，本文不是介紹其功能，本文假設(shè)你已經(jīng)熟悉break和continue的語意和用法
2012-05-05
uni-app實(shí)現(xiàn)數(shù)據(jù)下拉刷新功能實(shí)例
很多列表頁總數(shù)量很大,一次性查詢加載會(huì)導(dǎo)致頁面有很長時(shí)間的空白期,自然體驗(yàn)感極差,就會(huì)使用分頁加載數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于uni-app實(shí)現(xiàn)數(shù)據(jù)下拉刷新功能實(shí)例的相關(guān)資料,需要的朋友可以參考下
2022-08-08
ie下$.getJSON出現(xiàn)問題的解決方法
ie下$.getJSON出現(xiàn)問題是常有的事，下面為大家介紹下具體該如何解決,需要的朋友可以參考下
2014-02-02
微信公眾號(hào)平臺(tái)接口開發(fā) 獲取access_token過程解析
這篇文章主要介紹了微信公眾號(hào)平臺(tái)接口開發(fā) 獲取access_token過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
javascript實(shí)現(xiàn)簡單計(jì)算器效果【推薦】
下面小編就為大家?guī)硪黄猨avascript實(shí)現(xiàn)簡單計(jì)算器效果【推薦】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考
2016-04-04
JavaScript 處理Iframe自適應(yīng)高度(同或不同域名下)
Iframe自適應(yīng)高度一直都備受關(guān)注，接下來為大家介紹下同域名下Iframe自適應(yīng)高度的處理以及跨域時(shí)Iframe高度自適應(yīng)，感興趣的朋友可以參考下哈
2013-03-03
利用JavaScript如何查詢某個(gè)值是否數(shù)組內(nèi)
這篇文章主要給大家介紹了關(guān)于利用JavaScript如何查詢某個(gè)值是否數(shù)組內(nèi)的相關(guān)資料，文中通過示例代碼分別介紹了實(shí)現(xiàn)該問題的一些解決方法是否可行，需要的朋友可以參考借鑒，下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-07-07
淺析JavaScript作用域鏈、執(zhí)行上下文與閉包
JavaScript 采用詞法作用域（lexical scoping），函數(shù)執(zhí)行依賴的變量作用域是由函數(shù)定義的時(shí)候決定，而不是函數(shù)執(zhí)行的時(shí)候決定，通過本文給大家介紹JavaScript作用域鏈、執(zhí)行上下文與閉包相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧
2016-02-02
頁面圖片浮動(dòng)左右滑動(dòng)效果的簡單實(shí)現(xiàn)案例
本篇文章主要是對(duì)頁面圖片浮動(dòng)左右滑動(dòng)效果的簡單實(shí)現(xiàn)案例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02