BOM 是浏览器对象模型 它提供了独立内容而与浏览器窗口进行交互的对象，其核心对象是window
窗口加载事件
注意：window.onload 就可以吧JS代码写在页面元素的上方，因为onload是等页面内容全部加载完毕，在执行处理函数
传统方式，只能写一次，如果有多个，将以最后一个为准，覆盖之前的。addEventListener这种方式的不受影响的
1.传统的
window.onload = function(){
//获取元素
//触发事件
//执行动作
}
2.最新方式
window.addEventListener('load',function(){
//获取元素
//触发事件
//执行动作
})
//例如：
window.addEventListener('load',function(){
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
alert('点击')；
})
})
3.document.addEventListener('DOMContentLoaded',function(){
alert('你好')
})
load要等页面内容全部加载完毕，包含页面的dom元素，图片 flash css等等
DOMContentLoaded 等Dom元素加载完毕 不包含 图片 falsh css 等就可以执行，加载速度要load快 适用于图片比较大的网站
调整窗口大小事件
window.onresize = function(){} //只要浏览器窗口发生变化，就会触发事件
例如：
window.addEventListener('load',function(){
var div = document.querySelector('div')
window.addEventListenner('resize',function(){
if(window.innerWidth <= 800){ // innerWidth 识别屏幕的宽度
div.style.display= 'none';
}
})
})
定时器之 setTimeout
语法格式：window.setTimeout(调用函数 ，延时事件)；
注意：1.window字样可以省略，延时时间单位是毫秒，也可以省略，默认是0
2.页面中可能有很多定时器，我们可以给定时器加标识符号（起个名）
例如：
1.setTimeout(function(){
console.log('测试')
},2000); //2s执行
2.function callback() {
console.log('爆炸了')
}
setTimeout(callback,3000); // 3s 执行
var timer1 = setTimeout（callback，3000） //定义定时器的名字，多个定时器可同时执行
var timer2 = setTimeout （callback，3000）
回调函数：就是等某一件事件做完，再次调用，比如：定时器、事件对象里面的函数
停止定时器 setTimeout()
clearTimeout(要取消的定时器的函数名字)
如：clearTimeout(timer1)
定时器之setInterval
setInterval（回调函数，间隔多少毫秒）；
注意：1.只要不结束，就一直执行，重复调用函数，类似永动机
2.注意事项跟setTimeout一样
清除定时clearInterval()
综合：
案例一：（功能：点击开始倒计时则开始，点击暂停倒计时则暂停）
"en">
"UTF-8">
"X-UA-Compatible" content="IE=edge">
"viewport" content="width=device-width, initial-scale=1.0">
Document
案例二：（模仿web页面倒计时功能）
"en">
"UTF-8">
"X-UA-Compatible" content="IE=edge">
"viewport" content="width=device-width, initial-scale=1.0">
Document
class=
"box">
class="one">1
class="two">2
class="three">3