BOM
1、DOM和BOM的区别
![image-20220303165353436](https://s2.loli.net/2022/03/03/YRQlyhH6CxcPS2v.png)
2、窗口加载事件
![image-20220303170251590](https://s2.loli.net/2022/03/03/gn6DojPl4wrkVX7.png)
![image-20220303170606943](https://s2.loli.net/2022/03/03/76g1lmcSBN9JCiQ.png)
3、调整窗口大小隐藏div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<script>
window.addEventListener('load',function () {
let div = document.querySelector('div');
window.addEventListener('resize',function () {
if (window.innerWidth <= 800){
div.style.display = 'none';
}else {
div.style.display = 'block';
}
})
})
</script>
<div></div>
</body>
</html>
4、定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
5、三秒后自动关闭广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
margin: 0px;
position: absolute;
background-color: pink;
width: 100%;
height: 200px;
}
#gg{
position: relative;
margin: 65px auto;
text-align: center;
font-size: 40px;
}
#x{
width: 27px;
height: 27px;
position: absolute;
right: 10px;
font-size: 20px;
text-align: center;
cursor: pointer;
background-color: #ac59ac;
}
</style>
</head>
<body>
<div class="box">
<div id="x">x</div>
<div id="gg"><span>我是广告(我三秒后自动关闭)</span></div>
</div>
<script>
let box = document.querySelector('.box');
let x = document.getElementById('x');
x.onclick = function () {
box.style.display = 'none';
}
setTimeout(function () {
box.style.display = 'none';
},3000)
</script>
</body>
</html>
![image-20220303174537194](https://s2.loli.net/2022/03/03/pvkGMo6CfercWgh.png)
6、清除定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>点一下我就停止弹窗事件</button>
<script>
let btn = document.querySelector('button');
let timer = setTimeout(function () {
alert("boom");
},3000)
btn.addEventListener('click',function () {
clearTimeout(timer);
})
</script>
</body>
</html>
7、setInterval()定时器
![image-20220303180206929](https://s2.loli.net/2022/03/03/i7oJheIXpQwbst4.png)
8、动态倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
margin: 200px;
}
span {
display: inline-block;
width: 40px;
height: 40px;
background-color: #333;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div>
<span class="day">1</span>
<span class="hour">2</span>
<span class="minute">3</span>
<span class="second">4</span>
</div>
<script>
let days = document.querySelector('.day');
let hours = document.querySelector('.hour');
let minutes = document.querySelector('.minute');
let seconds = document.querySelector('.second');
let tt = prompt("请输入结束时间(xxxx-xx-xx xx:xx:xx)");
countDown();
console.log(tt);
setInterval(countDown,1000);
function countDown(time) {
let nowTime = +new Date();