【JavaScript定時器小案例】常見的幾種定時器實現的案例

歸子莫發表於2021-11-20
JavaScript定時器

【JavaScript定時器小案例】常見的幾種定時器實現的案例

部落格說明

文章所涉及的資料來自網際網路整理和個人總結，意在於個人學習和經驗彙總，如有什麼地方侵權，請聯絡本人刪除，謝謝！

說明

在日常開發中定時器的使用還是挺多的，這裡介紹幾種比較常見的。

案例一：手機驗證碼倒數計時

程式碼
<!DOCTYPE html>
<html>
<body>

    <input type="button" value="獲取驗證碼" onclick="settime(this)" />
  
  <script>
    // 傳送驗證碼
        var countdown = 60;
        function settime(obj) {
       if (countdown === 0) {
          obj.removeAttribute("disabled");
          obj.value="獲取驗證碼";
          countdown = 60;
          return;
       } else {
          obj.setAttribute("disabled", true);
          obj.value = "重新傳送(" + countdown + ")";
          countdown--;
       }
       setTimeout(function() {
          settime(obj)
       },1000)
    }
  </script>
</body>
</html>
效果

image-20211115190710776image-20211115190725477

程式碼解析

使用setTimeout來模擬倒數計時的效果，這其中有小許誤差，不過可以在可接受的範圍內。

案例二：日曆時鐘

程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>簡易時鐘</title>
    <style>
        .time{
          width: 300px;
          height: 60px;
          margin:0px auto;
          line-height: 60px;
          text-align: center;
          color: red;
          background-color: yellow;
      }
    </style>
</head>
<body>
    <div id="time" class="time"></div>
</body>
<script>
    setInterval(function(){
        var d = new Date();
        var time = document.getElementById('time');
        //獲取當前區域時間並轉成字串
        time.innerHTML = d.toLocaleString();
    },1000);
</script>
</html>
效果

image-20211115192529349

程式碼解析

利用setInterval每間隔1秒獲取一次當前時間

案例三：抽獎

程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽獎</title>
</head>
<body>
    <input type="button" value="開始" onclick="start()" />
        <input type="button" value="結束" onclick="end()" />
</body>
<div id="num_text">
</div>
<script>
    var i = 1;
    var t = Object;
    function setNum() {
      var res = document.getElementById('num_text')
      res.innerHTML = i;
      res.style.fontSize = '200px'
      i++;
      // 超過100重置
      if(i === 100){
         i = 1;
      }
    }
    function start() {
      t = setInterval(setNum, 10)
    }
    function end() {
      t = clearInterval(t)
    }
</script>
</html>
效果

image-20211115193750566

程式碼解析

先讓一個數開始快速迴圈，通過使用setInterval完成，當點選結束時，呼叫clearInterval清除定時器，達到定格的效果，具體迴圈內可以換成獎品陣列或者其他的資料，也能夠達到此類效果。

總結

選了三個比較有代表性的案例，pym也可以通過以上三個簡單的案例擴充起來，達到鍛鍊JS的定時器的效果。比如日曆時鐘的那個，可以做成一個錶盤，讓時分秒進行轉動。

如果點贊有50，就安排上！

感謝

萬能的網路

以及勤勞的自己，個人部落格，GitHub測試，GitHub

公眾號-歸子莫，小程式-小歸部落格

相關文章