BOM
- BOM(Browser Object Model)浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是Window
- BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性
- BOM就是把浏览器当作一个对象，区别于DOM把文档看作一个对象
- BOM的*对象是Window,区别于DOM的*对象是document
1. Window对象
- 是BOM的*对象，它是JS访问浏览器窗口的一个接口
- 它是一个全局对象，定义在全局作用域的变量和函数都会变成window对象的属性和方法，在调用的时候可以省略window,以嵌学习的对话框都属于window对象方法，比如：alert() prompt()等
- 注意window下的一个特殊的属性window.name 就是在定义全局变量时，避开name
1. Window对象的常见事件
1. 窗口加载事件
<script>
window.onload = function(){
}
// 或者
window.addEventListener('load',function(){})
</script>
window.onload 是 窗口加载事件 ，当文档内容完全加载完成时会触发该事件（就是等图像，脚本文件，CSS文件等加载完毕时），就调用该函数，
有了window.onload ，就可以不像在DOM中需要将script的内容必须写在文档元素的下面，此时可以将JS写在页面元素的上下方，因为onload是等页面内容加载完，再去执行处理函数
window.onload这种传统注册方式只能写一次，如果有多个，会以最后一个为准
window.addEventListener方法却可以写多个
<body>
<button>
点击我
</button>
<script>
var btn = document.querySelector('button');
window.onload = function(){
alert('22');
}
// 或者
window.addEventListener('load',function(){
btn.addEventListener('click',function(){
alert('点击');
})
})
document.addEventListener('DOMContentLoaded',function(){
btn.addEventListener('click',function(){
alert('点击');
})
})
// DOMContentLoaded事件触发时，仅当DOM加载完毕，不包括样式表，图片，flash等，IE9以上支持
// 若页面的图片很多，从用户访问到onload触发可能需要较长的事件，交互效果就不能实现，
// 必然会影响用户体验，此时用DOMContentLoaded事件合适
</script>
</body>
2. 调整窗口大小事件
<script>
window.onresize = function(){
}
//或者
window.addEventListener('resize',function(){})
</script>
window.onresize是调整窗口大小事件 ，当窗口的大小发生像素变化时就会触发这个事件
经常利用这个事件完成响应式布局，
window.innerWidth是当前窗口的宽度
window.innerHeight是当前窗口的高度
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<script>
window.addEventListener('load', function () {
var div = document.querySelector('div');
window.addEventListener('resize', function () {
console.log(window.innerWidth);
console.log('变化了');
if (window.innerWidth <= 400) {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
})
})
</script>
<div></div>
<!-- 交互效果，当窗口的宽度小于400px时就隐藏该粉色盒子，大于则显示 -->
</body>
3. 定时器
1. window.setTimeout(回调函数，【延迟的毫秒数】) 这个window在调用时可以省略
setTimeout方法用于设置一个定时器，该定时器在定时器到时间后就会执行调用函数
【延迟的毫秒数】可以省略，默认是0秒
页面中可能有多个 定时器，可以给 定时器加标识符（起个名字）
<script>
// setTimeout(function(){
// alert('时间到了');
// },2000);
// //两秒后就触发了
function bao(){
alert('时间到了');
}
// 有多个 定时器，可以给 定时器加标识符
var t1 = setTimeout(bao,2000);
var t1 = setTimeout(bao,5000);
</script>
setTimeout函数也称做回调函数，就是时间到了才会去调用
回调就是回头调用
以前的点击事件，onclick,也是回调函数，只有点击了才会调用
5秒后自动关闭的广告案例
5秒后就将广告图片隐藏起来，用到定时器定时
<body>
<img src="imagines/tu07.jpg" alt="">
<script>
var ad = document.querySelector('img');
setTimeout(function(){
ad.style.display='none';
},5000)
</script>
清除定时器 window.clearTimeout(定时器标识符) 这个window在调用时可以省略
<script>
function bao(){
alert('时间到了');
}
// 有多个 定时器，可以给 定时器加标识符
var t1 = setTimeout(bao,2000);
clearTimeout(t1);
</script>
3. window.setInterval(回调函数，【间隔的毫秒数】) 这个window在调用时可以省略
setInterval方法就是每隔一段时间就去调用一次回调函数
【间隔的毫秒数】可以省略，默认是0秒
页面中可能有多个 定时器，可以给 定时器加标识符（起个名字）
区别于setTimeout，是延迟事件到了，就去调用回调函数，只调用一次， 就结束了这个 定时器
而setInterval方法会重复调用回调函数
script>
function bao(){
alert('时间到了');
}
var t1 = setInterval(bao,2000);
</script>
倒计时案例(目前仍有问题)
分析：
- 因为这个倒计时是不断变化的，因此需要 定时器来自动变化（setInterval）
- 三个黑色盒子分别存放时分秒
- 三个黑色盒子利用innerHTML放入计算的小时分钟秒数
<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('2021-12-7 23:35:00');//返回用户输入的时间的毫秒数
//先调用一次这个函数，防止第一次刷新页面有空白
countDown();
//2. 开启定时器，每个一秒调用封装的倒计时函数
setInterval(countDown, 1000);
function countDown() {
var nowTime = +new Date();//返回当前时间总的毫秒数
var times =inputTime > nowTime? (inputTime - nowTime) / 1000:0;
// //剩余的时间戳，此处把毫秒换算为秒了
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>
清除定时器 window.clearInterval(定时器标识符) 这个window在调用时可以省略
<body>
<button class="begin">开启定时器</button>
<button class="stop">关闭定时器</button>
<script>
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var t = null;//此处给定时器设置一个全局的标识符，便于清除定时器
//因为定时器本身是一个对象，给全局变量赋值为空对象 null
begin.addEventListener('click',function(){
t = setInterval(function(){
alert('nihao');
},1000)
})
stop.addEventListener('click',function(){
clearInterval(t);
})
</script>
</body>
发送短信案例：
就是用户点击发送按钮后，该按钮在三秒之内不能再次点击，防止重复发送短信
分析：
- 按钮点击之后，会禁用disabled为true
- 同时按钮里面的内容会变化，让用户看到“你还有多少秒再次可以点击”的内容时有秒数的变化，注意button里面的内容通过innerHTML修改
- 里面的秒数有变化，要用定时器
- 定义一个变量，在定时器里面不断地递减
- 如果变量递减到0，说明到了时间，就需要停止定时器，并且回复到按钮的初始状态
<body>
手机号码：<input type="number"> <button>发送</button>
<script>
// 1.获取元素 ：按钮点击之后，会禁用disabled为true
var btn = document.querySelector('button');
var time = 3;//定义剩下的总秒数
btn.addEventListener('click',function(){
btn.disabled = true;
// 按钮里面的内容会变化:button里面的内容通过innerHTML修改
//将以上内容写到计数器中，
var t =setInterval(function(){
if(time==0){
clearInterval(t);
btn.disabled = false;
btn.innerHTML = "发送";
time=3;//此处的3要重置
}
else{
btn.innerHTML = '还剩下'+time+'秒';
time--;
}
},1000)
})
</script>
</body>