guizimo

【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

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

相关文章:

猜你喜欢