乐趣区

关于前端:JavaScript定时器小案例常见的几种定时器实现的案例

jiezi

【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>
成果

代码解析

应用 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>
成果

代码解析

利用 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>
成果

代码解析

先让一个数开始疾速循环，通过应用 setInterval 实现，当点击完结时，调用 clearInterval 革除定时器，达到定格的成果，具体循环内能够换成奖品数组或者其余的数据，也可能达到此类成果。

总结

选了三个比拟有代表性的案例，pym 也能够通过以上三个简略的案例裁减起来，达到锤炼 JS 的定时器的成果。比方日历时钟的那个，能够做成一个表盘，让时分秒进行转动。

如果点赞有 50，就安顿上！

感激

万能的网络

以及勤奋的本人，集体博客，GitHub 测试，GitHub

公众号 - 归子莫，小程序 - 小归博客

退出移动版