定时器（笔记+案例）

最新推荐文章于 2022-03-10 22:26:16 发布

秋天快来

最新推荐文章于 2022-03-10 22:26:16 发布

阅读量262

点赞数 1

本文链接：https://blog.csdn.net/m0_58630861/article/details/119190306

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、 setTimeout() 炸弹定时器 开启定时器：window.setTimeout(调用函数，延迟的毫秒数）； setTimeout中的调用函数也称为回调函数callback

2、setInterval() 闹钟定时器 window.setInterval(回调函数[,间隔的毫秒数]); setInterval()方法每个指定的毫秒数，就调用一次回调函数

案例

发送短信倒计时点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width: 300px;
      height: 60px;
      margin: 50px auto;
    }
  </style>
</head>
<body>
  <div>
    <form action="#">
      <input type="text">
      <!-- button默认是提交按钮 单击有默认行为 -->
      <button>发送</button>
  </form>
  </div>
  <script>
    var btn=document.querySelector('button');
    btn.addEventListener('click',function(){
      //禁用按钮
      this.disabled=true;

      //开始计时，计时到了，启用计时
      setTimeout(function(){
        /* var btn =document.querySelector('button'); */
        btn.innerHTML='还有60秒启用';
        var total=60;
        var t1=null;

        t1=setInterval(function(){
          //计算剩余时间，在按钮上提示
          total--;
          btn.innerHTML='还有'+total+'秒启用';

          if(total==0){
            clearInterval(t1);
            //按钮上的文字变为发送 启用
            btn.innerHTML='发送';
            btn.disabled=false;
          }

        },1000)
        //回调函数内不能使用this
        
      })

      //阻止默认行为
      return false;
    })
  </script>
</body>
</html>

2.页面上有一个倒计时时钟，显示距离双十一还有多长时间，要求自动变化，具体表现如下图：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      display: inline-block;
    }
    .day{
      width: 70px;
      height: 30px;
      float: left;
      color: orange;
      font-size: 20px;
      line-height: 50px;
    }
    .hour,
    .min,
    .sec{
      margin: 10px;
      float: left;
      width: 70px;
      height: 30px;
      background-color: orange;
      color: white;
      font-size: 20px;
      text-align: center;
      line-height: 30px;
    }
  </style>
</head>
<body>
  <div class="nav">
    <h3>距离双十一，还有</h3>
    <div class="day"></div>
    <div class="hour"></div>
    <div class="min"></div>
    <div class="sec"></div>
  </div>
  <script>
    var day=document.querySelector('.day');
    var hour=document.querySelector('.hour');
    var min=document.querySelector('.min');
    var sec=document.querySelector('.sec');
    function cutdown(time){
      var nowTime=+new Date();
      var inputTime=+new Date(time);

      var times=(inputTime-nowTime)/1000;
      var d=parseInt(times/60/60/24) ;
      day.innerHTML=d+'天';
      var h=parseInt(times/60/60%24);
      hour.innerHTML=h+'小时';
      var m=parseInt(times/60%60);
      min.innerHTML=m+'分钟';
      var s=parseInt(times%60);
      sec.innerHTML=s+'秒';
    };
    cutdown('2021-11-11 00:00:00');
    setInterval(function(){
      cutdown('2021-11-11 00:00:00');
    },1000)
  </script>
</body>
</html>

秋天快来

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定时器（笔记+案例）

1、 setTimeout() 炸弹定时器开启定时器：window.setTimeout(调用函数，延迟的毫秒数）； setTimeout中的调用函数也称为回调函数callback2、setInterval() 闹钟定时器 window.setInterval(回调函数[,间隔的毫秒数]); setInterval()方法每个指定的毫秒数，就调用一次回调函数案例发送短信倒计时点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信<!DOCTYPE html>...
复制链接

扫一扫