BOM概述
BOM：Browser Object Model，浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法和属性
BOM缺乏标准 BOM比DOM更大，它包含DOM
window对象是浏览器的顶级对象，它具有双重角色
它是JS访问浏览器窗口的一个接口它是一个全局对象，定义在全局作用域中的变量函数，函数都会变成window 对象的属性和方法。在调用的时候可以省略window,前面学习的对话框都属于window 对象方法，如alert()、prompt()等window 下有个特殊属性 window.name 因此在定义变量时不能用name
window对象的常见事件
window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数
注意：
有了window.onload 就可以把JS代码写道页面元素上方，因为onload 是等页面内容全部加载完毕，再去执行处理函数window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload 为准，因此更推荐用 window.addEventListener 方式，不会产生冲突
<script>
window.onload = function () {
var btn = document.
querySelector("button");
btn.addEventListener("click", function () {
alert("点击我！");
});
};
<button>点击</button>
;
load 是等页面全部加载完毕，包含页面dom元素 图片 flash css 等 DOMContentLoaded 是 DOM 加载完毕，不包含图片 flash css等就可以执行，加载速度比 load 更快
//先加载33 再弹出22
window.addEventListener('load ',function(){
alert(22
);
})
document.addEventListener('DOMContentLoaded',function(){
alert(33
);
window.onresize 调整窗口大小事件，只要窗口大小发生改变，就会触发这个事件，我们经常利用这个事件完成响应式布局，
使用 window.innerWidth/Height获得当前屏幕的宽度/高度
//window.resize 调整窗口大小事件 只要窗口大小发生改变，就会触发这个事件
window.addEventListener("load", function () {
var div = document.
querySelector("div");
window.addEventListener("resize", function () {
console.
log(window.innerWidth
); //打印当前窗口宽度
if (window.innerWidth <= 800) {
div.style.display =
"none"; //窗口宽度小于800时，盒子隐藏
} else {
div.style.display =
"block";
}
});
});
// window.onresize = fnction(){}
定时器
window 对象提供的定时器有以下两个方法：
- window.setTimeout ( 调用函数，[延迟的毫秒数])
在定时器到期后调用函数或计算表达式。调用一次就结束了这个定时器。window 可省略 ，[延迟的毫秒数] 也可省略，如果省略，默认为0 ，即立即执行这个调用函数可以直接写函数，还可以写函数名还有一个写法 ‘函数名()’ 但不提倡页面中可能有很多定时器，我们经常给定时器起一个名字这个调用函数也称为回调函数callback ，即 上一件事情做完了，再回头调用这个函数
<script>
//window.setTimeout ( 调用函数，[延迟的毫秒数]) ：在定时器到期后调用函数或计算表达式。
//window 可省略 ，[延迟的毫秒数]也可省略，如果省略，默认为0 ，即立即执行
setTimeout(function () {
console.
log("时间到了");
}, 2000
); //2s后执行调用函数
//这个调用函数可以直接写函数，还可以写函数名
function callback() {
console.
log("爆炸了");
}
setTimeout(callback, 3000
);
//还有一个写法
'函数名()' 但不提倡
setTimeout("callback()", 3000
);
//页面中可能有很多定时器，我们经常给定时器起一个名字
var time1 =
setTimeout(callback, 3000
);
var time2 =
setTimeout(callback, 5000
);
</script>
案例：5s后自动关闭广告
<style>
img {
width: 300px
;
height: 400px
;
display: block
;
}
</style>
</head>
<body>
<img src=
"images/zxc.jpg" alt=
"" />
<script>
var img = document.
querySelector("img");
function Close() {
img.style.display =
"none";
}
window.
setTimeout(Close, 5000
);
</script>
</body>
停止setTimeout（）定时器定时器：window.clearTimeout(timeoutID)
//停止setTimeout（）定时器定时器：window.
clearTimeout(timeoutID
)
//window 可省略
var btn = document.
querySelector("button");
btn.addEventListener("click", function () {
clearTimeout(time1
); //time1是定时器的名字
});
- window.setInterval ( 回调函数 ，[间隔的秒数])：
按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会反复不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。window可省略[延迟的毫秒数] 也可省略，如果省略，默认为0 ，即立即执行这个调用函数可以直接写函数，还可以写函数名还有一个写法 ‘函数名()’ 但不提倡页面中可能有很多定时器，我们经常给定时器起一个名字
setInterval(function () {
console.
log("时间到了");
}, 2000
); //每隔2s后就执行一次调用函数
//这个调用函数可以直接写函数，还可以写函数名
function callback() {
console.
log("爆炸了");
}
setInterval(callback, 3000
);
定时器实现倒计时
这个倒计时是不断变化的，因此需要定时器来自动变化三个盒子里面分别存放时分秒三个盒子利用innerHTML放入计算的小时分钟秒数第一次执行也是间隔毫秒数，因此刚刷新时会有空白最好采用封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面时有空白问题
<style>
div {
display: inline-block
;
width: 100px
;
height: 100px
;
background-color: black
;
color: #eee
;
font-size: 18px
;
text-align: center
;
line-height: 100px
;
margin: 200px auto
;
}
</style>
</head>
<body>
<div class=
"hour">1</div>
<div class=
"minute">2</div>
<div class=
"second">3</div>
<script>
//1.获取元素
var hour = document.
querySelector(".hour");
var minute = document.
querySelector(".minute");
var second = document.
querySelector(".second");
var inputTime = +new
Date("2020-10-5 12:00:00"); //返回的是用户输入时间的总毫秒数
countDown(); //先调用一次这个函数，防止刚开始刷新页面时有空白问题
//用定时器调用函数
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 ?
h : "0" + h
;
hour.innerHTML = h
; //把剩余的小时给黑色的小盒子
var m =
parseInt((times / 60
) % 60
); //分
m = m >= 10 ?
m : "0" + m
;
minute.innerHTML = m
; //把剩余的分钟给黑色的小盒子
var s =
parseInt(times % 60
); //秒
s = s >= 10 ?
s : "0" + s
;
second.innerHTML = s
; //把剩余的秒数给黑色的小盒子
}
</script>
</body>
停止IntervalTimeout()定时器定时器window.clearInterval(timeoutID)
<body>
<button class=
"begin">开始定时器</button>
<button class=
"stop">停止定时器</button>
<script>
//清除setInterval定时器
var begin = document.
querySelector(".begin");
var stop = document.
querySelector(".stop");
var timer = null
; //定义全局变量，这样其他函数就可以访问这个变量， null是一个空对象
begin.addEventListener("click", function () {
timer = setInterval(function () {
console.
log("定时器开始");
}, 1000
);
});
stop.addEventListener("click", function () {
clearInterval(timer
);
});
</script>
