BOM（一）：window对象的常见事件（页面加载、调整窗口大小）、定时器

一、BOM概述

1、bom

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。

2、dom/bom对比

 bom比dom更大，bom包含了dom

二、页面加载事件 

使用window.load添加页面加载事件，这样即使标签在script代码的下面也是可以执行的，也就是load会等页面内容加载完毕后（包括DOM，图片，flash，css等）再去走window.load里面的代码。

1、传统方式

（1）.有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。

（2）.window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。

window.onload = function () {
    var btn = document.querySelector('button');
    btn.addEventListener('click', function () {
        alert('11');
    })
}

2、使用方法监听window.addEventListener注册事件

  window.addEventListener('load', function () {
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            alert('22');
        })
    })

3、DOMContentLoaded加载完DOM就显示

DOMContentLoaded是DOM加载完毕后就执行里面的代码，不包含图片和css等，所以加载速度比load要快一些

window.addEventListener('DOMContentLoaded', function () {
    var btn = document.querySelector('button');
    btn.addEventListener('click', function () {
        alert('33');
    })
})
// 结果是33,11,22

三、调节窗口大小事件 

window.onresize = function() {}
获取当前屏幕宽度：window.innerWidth
只要窗口大小发生改变，就会触发这个事件

<script>
	//如果标签再后边，记得把执行代码写在load里面
    window.addEventListener('load', function () {
        var div = document.querySelector('div');
        //如果宽度小于800就隐藏，否则显示
        window.addEventListener('resize', function () {
            if (window.innerWidth < 800) {
                div.style.display = 'none';
            } else {
                div.style.display = 'block';
            }
        })
    })
</script>
<div></div>

四、定时器 

1.setTimeout(调用函数，延迟的毫秒数)

其实这个函数也叫回调函数，就是上一件事儿干完，再回头调用的意思。我们的点击事件也是如此，点击操作结束之后，再回头调用函数。这个是时间到了之后，再回头调用函数。
window.setTimeout()用于设置一个定时器，该定时器在定时器到期后执行调用函数，window可以省略
注意：
1.第一个参数调用的函数，可以直接在里面写function () {}，也可以写函数的名字，然后在外面定义函数。
2.第二个参数可以省略，省略的话就是0。它的单位是毫秒
3.页面中可能有很多的定时器，我们经常给它们起名字
比如2s后打印：

setTimeout(function () {
    console.log('2s后显示');
}, 2000);

3s后显示

function callback() {
    console.log('3s后显示');
}
setTimeout(callback, 3000);

比如给它们起名字：

var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);

 2.clearTimeout(定时器名字)

window.clearTimeout清除定时器，window可以省略。括号里是定时器的名字

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

3.setInterval()

这个和第一个setTimeout写法是一样的，只不过，不同之处在于setTimeout是隔几秒之后调用一次函数，而setInterval是隔几秒之后调用，然后再隔几秒再调用，就是无限调用函数
比如刚才的控制台打印，如果这样写的话就是无限打印，每隔2s

setInterval(function () {
    console.log('2s后显示');
}, 2000);

4.倒计时效果

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.kill {
    margin: 200px auto;
    width: 300px;
    height: 100px;
    line-height: 110px;
    text-align: center;
    background-color: rgb(242, 140, 140);
}

.kill span {
    margin: 0 10px;
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    background-color: black;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

<div class="kill">
    <span class="hour"></span>
    <span class="minute"></span>
    <span class="second"></span>
</div>

老师思路
1.获取剩余时分秒的这个函数以前写过的，这里最后的小时不是取余而是统计所有的小时数
2.获取剩余时间之后，把剩余时间放到三个框框的内容里
3.setInterval函数每隔1s调用一次，future可以作为全局变量写到函数外边
4.在定时器之前先调用一次函数，要不然定时器会卡一秒才动 

var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var future = +new Date('2022-7-8 15:10:10');
//在定时器之前先调用一次，防止页面刷新要等一秒才调用
countDown();
setInterval(countDown, 1000);
function countDown() {
    var now = +new Date();
    var left = future - now;
    var seconds = parseInt(left / 1000 % 60);  //看看有多少个60s，剩下的不够60的才是应该显示的秒数
    var minutes = parseInt(left / 1000 / 60 % 60);  //看看有多少个60分钟，这里取整所以多余的秒扔掉，
    // 剩下的不够60的是应该显示的分钟数，比如3661s是61分钟01秒，取整应该是61分钟，那么这里就显示1分钟
    var hours = parseInt(left / 1000 / 60 / 60); //看看有多少个小时，取整
    //自动补0
    hours = hours < 10 ? '0' + hours : hours;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    hour.innerHTML = hours;
    minute.innerHTML = minutes;
    second.innerHTML = seconds;
}

5.clearInterval()清除定时器

比如有两个按钮，一个开始定时器，一个结束定时器
这里要注意timer不要在函数内部声明，要在外边声明全局变量（或者在函数里面不写var）。如果在外边声明最好给个null，反正就是别不给值，要不然不太好。

var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null;
begin.addEventListener('click', function () {
    timer = setInterval(function () {
        console.log('111');
    }, 1000);
})

stop.addEventListener('click', function () {
    clearInterval(timer);
})

五、短信验证码60秒重复发送案例

<input type="text">
<button>发送</button>

<script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        btn.addEventListener('click', function () {
            btn.disabled = true;
            var i = 60;  //设置一个变量来倒计时
            countDown();  //定时器之前先调用一次，就不会延迟了
            var timer = setInterval(countDown, 1000);

            function countDown() {
                if (i == 0) {
                    btn.disabled = false;  //重置按钮状态
                    btn.innerHTML = '发送';
                    clearInterval(timer);  //清除定时器记得写名字
                } else {
                    i--;
                    btn.innerHTML = i + 's后可以再次发送';
                }
            }
        })
</script>