JS中BOM 浏览器对象提供的定时器

鸡蛋灌饼侠

已于 2023-01-06 10:35:16 修改

阅读量482

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2023-01-05 21:04:03 首次发布

本文链接：https://blog.csdn.net/qq_39321234/article/details/128569785

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

window对象提供了2个定时器方法：
settTimeout()和setInterval()

1.setTimeout()定时器
语法：

window.setTimeout(调用函数,[延迟的毫秒数]);

延迟时间可以省略，省略则为0

用于设置一个定时器，该定时器再定时器到期后执行调用函数

写法一：

    <script>
      setTimeout(
        function () {
          console.log("时间到了");
        },
        [2000]
      ); //window可以省略
    </script>

写法二：

    <script>
      function callback() {
        console.log("bomb");
      }
      setTimeout("callback()", 3000);
    </script>

繁琐，不提倡

页面中可能有很多的定时器，我们经常给定时器家标识符（取名字）

setTimeout() 也叫回调函数
即等待时间结束，再调用函数

示例：

<!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>
  </head>
  <body>
    <img src="./imgs/1.jpg" alt="" class="ad" />
    <script>
      var ad = document.querySelector(".ad");
      setTimeout(function () {
        ad.style.display = "none";
      }, 3000);
    </script>
  </body>
</html>

打开后页面显示出大大的海绵宝宝，3秒后消失

在这里插入图片描述

停止setTimeout()定时器

语法：

window.clearTimeout(timeoutID)

clearTimeout方法取消之前通过调用setTimeout()建立的定时器

示例：

<!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>
  </head>
  <body>
    <button>点击停止定时器</button>
    <script>
      alert("爆炸计时ing");
      var btn = document.querySelector("button");
      var timer = setTimeout(function () {
        //给定时器取名方便调用
        alert("爆炸了");
      }, 1000);
      btn.addEventListener("click", function () {
        clearTimeout(timer);
        alert("小子，你成功阻止了爆炸，明天来毛利侦探事务所上班吧");
      });
    </script>
  </body>
</html>

2.setInterval()定时器

语法：

window.setInterval(回调函数,[间隔的毫秒数]);

setInterval()方法反复调用一个函数，每隔这个时间，就去调用一次回调函数

    <script>
      setInterval(function () {
        console.log("憨憨");
      }, 1000);
    </script>

setInterval到时间不结束，重复调用

案例：

<!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>Document</title>
    <style>
        div {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

</html

清除setInterval定时器

<!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>Document</title>
</head>

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 全局变量  null是一个空对象
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('ni hao ma');

            }, 1000);
        })
        stop.addEventListener('click', function() {
            clearInterval(timer);
        })
    </script>
</body>

</html>

综合案例：

发送短信

<!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>Document</title>
  </head>

  <body>
    手机号码： <input type="number" /> <button>发送</button>
    <script>
      // 按钮点击之后，会禁用 disabled 为true
      // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
      // 里面秒数是有变化的，因此需要用到定时器
      // 定义一个变量，在定时器里面，不断递减
      // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
      var btn = document.querySelector("button");
      var time = 3; // 定义剩下的秒数
      btn.addEventListener("click", function () {
        btn.disabled = true;
        var timer = setInterval(function () {
          if (time == 0) {
            // 清除定时器和复原按钮
            clearInterval(timer);
            btn.disabled = false;
            btn.innerHTML = "发送";
          } else {
            btn.innerHTML = "还剩下" + time + "秒";
            time--;
          }
        }, 1000);
      });
    </script>
  </body>
</html>

鸡蛋灌饼侠

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS中BOM 浏览器对象提供的定时器

/ 同时按钮里面的内容会变化，注意 button 里面的内容通过 innerHTML修改。// 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态。// 我们先调用一次这个函数，防止第一次刷新页面有空白。// 按钮点击之后，会禁用 disabled 为true。// 里面秒数是有变化的，因此需要用到定时器。// 定义一个变量，在定时器里面，不断递减。// 返回的是用户输入时间总的毫秒数。// times是剩余时间总的秒数。// 返回的是当前时间总的毫秒数。
复制链接

扫一扫