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()
综合：
案例一：（功能：点击开始倒计时则开始，点击暂停倒计时则暂停）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="begin">开始倒计时</button>
<button class="stop">暂停倒计时</button>
<script>
//获取元素
window.addEventListener('load',function(){
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
//绑定开始事件
var timer=null;
begin.addEventListener('click',function(){
timer= setInterval(function() {
console.log(1)
},1000)
} )
stop.addEventListener('click',function(){
clearInterval(timer)
})
})
</script>
</body>
</html>
案例二：（模仿web页面倒计时功能）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
width: 110px;
height: 30px ;
}
.one,
.two,
.three {
margin-left: 5px;
width: 30px;
height: 30px;
background-color: black;
color: beige;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="box">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<script>
//思路： 1.将时间转换成秒,最新时间的秒数减去旧时间的秒数
// 2. 在将其转换成天、小时、分钟、秒数
// 3. 在利用定时器
var one = document.querySelector('.one');
var two = document.querySelector('.two');
var three = document.querySelector('.three')
setInterval(counttime,1000)
function counttime(){
var iNew = new Date()
var iNow = new Date('2021-12-22 12:00:01')
var timer = Math.floor((iNow - iNew)/1000) //
var d = parseInt(timer /60 /60 /24);
one.innerHTML=d;
var h = parseInt(timer /60 /60 %24)
two.innerHTML=h;
var s = parseInt(timer %60)
three.innerHTML=s;
}
</script>
</body>
</html>
时间计算公式：
var d = parseInt(timer /60 /60 /24);
var h = parseInt(timer /60 /60 %24);
var m = parseInt(timer /60 %60);
var s = parseInt(timer %60);
浙公网安备 33010602011771号