js實現(xiàn)內置計時器

更新時間：2019年12月16日 09:28:54 作者：ICY___

這篇文章主要為大家詳細介紹了js實現(xiàn)內置計時器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

計時器對于圖片輪播和倒計時之類的與時間相關的項目有著很大的聯(lián)系，它是實現(xiàn)這些的核心語法，如何一次深刻理解js計時器？往下看你就知道，有驚喜哦！

js計時器有兩種，一種為延時后單次的執(zhí)行，另一種為延時多次執(zhí)行。通過函數(shù)的遞歸，前者也可以打破壁壘，擁有循環(huán)執(zhí)行的功能。

setTimeout( javascript語句 , 毫秒);
（其中第一個值可以是一個函數(shù) 需要加" "，也可以是代碼）

//延遲一段時間執(zhí)行執(zhí)行一次

setInterval("javascript語句" , 毫秒);
（其中第一個值可以是一個函數(shù) 需要加" "，也可以是代碼）

//循環(huán)執(zhí)行

具體實例（一些細節(jié)和具體的用法還是在案例代碼中便于理解）

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>計時器</title>
  </head>
 
<body>
  <button id="none">停止計時器</button>
  <button id="start">開始計時器</button>
  <script>
    // 有兩個計時器
    // setTimeout();
    // 延遲一段時間 執(zhí)行 執(zhí)行一次
    // setInterval();
    // 循環(huán)執(zhí)行
    var stoptime=document.getElementById('none');//默認從零開始自加 獲取開始按鈕
    var starttime=document.getElementById('start');//獲取停止按鈕
    var count=0;
    var timecount;
    // 第一種
    /*showtime();
    function showtime(){
      count++;
      console.log(count);
      timecount=setTimeout('showtime()',1000);//延時一秒
    }//利用遞歸來實現(xiàn)循環(huán)時間
    stoptime.onclick=function(){//停止計時器
      clearTimeout(timecount);//將計時器清除，即停止自加
    }
    starttime.onclick=function(){//開始計時器
      timecount=setTimeout('showtime()',1000);//繼續(xù)開始自加
    }*/
//優(yōu)點：重啟計時器簡單，由于是原本是單次執(zhí)行，只需將之前的遞歸函數(shù)重新復制即可 缺點：需要遞歸調用
    // 第二種
    showtime();
    function showtime(){//封裝函數(shù)
      timecount=setInterval(function(){
        count++;
        console.log(count);
      },1000)
    }
    stoptime.onclick=function(){
      clearInterval(timecount);
    }
    starttime.onclick=function(){
      showtime();
    }
//優(yōu)點：不需要遞歸調用，直接實現(xiàn)循環(huán)。缺點：重啟較復雜，需要調用所有函數(shù)，建議封裝函數(shù)。
  </script>
</body>
 
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: