定时器（倒计时）

BOM 即浏览器对象模型

它提供了独立于内容而与 浏览器窗口进行交互的对象 ，其核心对象是window.

DOM 和 BOM的区别：

DOM

文档对象模型；
DOM就是把文档当做一个对象来看待；
DOM的顶级对象是 document ；
DOM主要学习的是操作页面元素；
DOM是W3C标准规范；

BOM

浏览器对象模型；
把 浏览器 当做一个对象来看待；
BOM的顶级对象是 window ；
BOM学习的是浏览器窗口交互的一些对象；
BOM是是浏览器厂商在各自浏览器上定义的，兼容性较差；

BOM比DOM更大，它包含DOM

window 对象的常见事件

1.1窗口加载事件

window.onload = fuction() {}
或者
window.addEventListener('load',fuction() {});

window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。

使用onload script想写在哪里都可以因为onload是先加载页面全部的内容所以script不一定要写在页面元素的下方

注意：

有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
如果使用addEventListener 则没有限制。

1.2窗口加载事件

window.onresize = fuction() {}
或者
window.addEventListener('resize',fuction() {});

window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数

注意：
1.只要窗口大小发生像素变化，就会触发这个事件。
2.我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度。

// js写在div上面 得用load 先加载页面 
 window.addEventListener('load', function() {
        var div = document.querySelector('div');
        window.addEventListener('resize', function() { //resize是调整窗口大小加载事件，当触发时就调用的处理函数
            console.log(window.innerWidth);

            console.log('变化了');
            if (window.innerWidth <= 800) { //当屏幕宽度小于800，里面的盒子就消失  大于800的时候再出现
                div.style.display = 'none';
            } else {
                div.style.display = 'block';
            }
        })
    })

3.定时器

3.2 setTimeout() 定时器

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

语法规范：window.setTimeout(调用函数,延时时间);
1.这个window在调用的时候可以省略
2.这个延时时间单位是毫秒但是可以省略，如果省略默认的是0
3.这个调用函数可以直接写函数还可以写函数名还有一个写法 ‘函数名()’
4.页面中可能有很多的定时器，我们经常给定时器加标识符（名字）

setTimeout(function() {
            console.log('时间到了');

        }, 2000); //2000毫秒=2秒
        function callback() {
            console.log('爆炸了');

        }
        var timer1 = setTimeout(callback, 3000);

案例：5秒之后自动关闭广告

<img src="images/ad.jpg" alt="" class="ad">
    <script>
        var ad = document.querySelector('.ad');
        setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);

3.3 清除setTimeout定时器

window.setTimeout{调用函数，[延迟的毫秒数]}

setTimeout{} 这个调用函数我们也称为 调用函数 callback

普通函数是按照代码顺序直接调用。
而这个函数，需要等待时间 ，时间到了才去调用，因此称为回调函数。

<button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
            console.log('爆炸了');
        }, 5000);
        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
    </script>

3.4 setInterval定时器

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

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

注意：
1.window可以省略。
2.这个调用函数可以直接写函数，或者写函数名。
3.间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

setInterval(function() {
            console.log('继续输出');
        }, 1000);

setTimeout 与 setInterval 区别：
1.setTimeout 延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器。
2.setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数。

案例：倒计时效果

<script>
        // 1.获取元素
        var hour = document.querySelector('.hour'); //小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2021-3-13 14: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>

3.5 清除setInterval定时器

<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>

案例：发送短信

按钮点击之后，会禁用 disabled 为true。
同时按钮里面的内容会变化，注意 button 里面的内容通过 innerHTML修改。
里面秒数是有变化的，因此需要用到定时器。
定义一个变量，在定时器里面，不断递减。
如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态。

var btn = document.querySelector('button');
        var time = 3; //定义剩下的秒数
        btn.addEventListener('click', function() {
            btn.disabled = true; //按下之后禁用按钮  这个btn 可以用this代替 属于方法
            var timer = setInterval(function() {
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false; //这个btn 不可以用this表示 它属于定时器里面的，如果用this表示，则会出错 this指向的是window
                    btn.innerHTML = '发送';
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);
        })