BOM
1、DOM和BOM的区别

2、窗口加载事件


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>
let time1 = setTimeout(function () {
console.log("我是第三秒执行的")
},3000)
let time2 = setTimeout(fn2,5000)
function fn2() {
console.log("我是第五秒执行的");
}
</script>
</body>
</html>
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>

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()定时器

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();
let inputTime = +new Date(tt);
let times = (inputTime - nowTime) / 1000;
let d = parseInt(times / 60 / 60 / 24);
d = d < 10 ? '0'+d : d;
days.innerHTML = d;
let h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0'+h : h;
hours.innerHTML = h;
let m = parseInt(times / 60 % 60);
m = m < 10 ? '0'+m : m;
minutes.innerHTML = m;
let s = parseInt(times % 60);
s = s < 10 ? '0'+s : s;
seconds.innerHTML = s;
}
</script>
</body>
</html>

9、开启和清除定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="up">开启定时器</button>
<button class="down">关闭定时器</button>
<script>
let up = document.querySelector('.up');
let down = document.querySelector('.down');
let timer = null;
up.addEventListener('click',function () {
timer= setInterval(function () {
console.log('1111');
},1000)
})
down.addEventListener('click',function () {
clearInterval(timer);
})
</script>
</body>
</html>
10、发送短信案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text">
<button class="btn">发送</button>
<script>
let ipt = document.querySelector('input');
let btn = document.querySelector('button');
let timer = null;
let num = 5;
btn.addEventListener('click',function () {
timer = setInterval(function () {
if (num === 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
num = 5;
}else {
btn.disabled = true;
btn.innerHTML = '请'+num+'秒后再发送';
num--;
}
},1000)
})
</script>
</body>
</html>
11、URL(location对象)



12、五秒后自动跳转页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>跳转</button>
<div></div>
<script>
let div = document.querySelector('div');
let btn = document.querySelector('button');
let num = 5;
btn.addEventListener('click',function () {
location.href = 'http://www.cnblogs.com/xiaoebaba'
})
setInterval(function () {
if (num === 0){
location.href = 'http://www.cnblogs.com/xiaoebaba';
}else {
div.innerHTML = "页面将在"+num+"秒内跳转到首页";
num--;
}
},1000)
</script>
</body>
</html>
13、获取URL参数
1、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="index.html" method="get">
<input name="uname" type="text">
<input type="submit" value="提交">
</form>
</body>
</html>
2、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div></div>
<script>
let div = document.querySelector('div');
let name = location.search.substr(1).split('=');
div.innerHTML = '欢迎您:'+name[1];
</script>
</body>
</html>

14、navigator对象

if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = "../H5/index.html"; //手机
}else{
window.location,href = "../PC/index"; ` //电脑
}
15、history对象
history.back() //后退功能
history.forward() //前进功能
go(参数) //前进后退功能 参数如果是1前进一个页面,如果是-1后退一个页面