目录
一.BOM概述
二.windows对象的常见事件
三.定时器
四.JS执行机制
一.BOM概述
1.1什么是BOM
BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
BOM提供了一系列相关对象，并且这一系列相关对象都提供了许多属性与方法。
1.2BOM与DOM的区别
BOM比DOM更大 BOM包含DOM
1.3BOM的构成
window对象时浏览器的顶级对象，它具有双重角色。
（1）它是JS访问浏览器的一个窗口
（2）它是一个全局变量，定义在全局作用域中的变量，函数都会变成window对象的属性与方法，在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert(), prompt()等
二.windows对象的常见事件
2.1窗口加载事件
window.onload是窗口（页面）加载事件，当文档页面完全加载完会触发该事件（包括图像，脚本，css文件等），就调用的处理函数。
window.onload=function(){}
或者
window.addEventListener("load",function(){})
注意：
（1）有了window.onload就可以JS代码写到页面元素的上方，因为onload是等页面全部加载完毕再去执行处理函数。
（2）window.onload传统注册页面方式只能写一次，如果有多个，以最后一个window.onload为准。
（3）如果使用多个，使用addEventListener。
onload传统方法代码演示：
<script>
window.onload = function () {
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('点击我');
})
}
window.onload=function(){
alert(22);
}
</script>
<button>点击</button>
onload侦听函数版代码演示：
<script>
window.addEventListener('load', function () {
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('点击我');
})
})
window.addEventListener('load', function () {
alert('hh ')
})
document.addEventListener('DomcontentLoaded',function(){
alert(33);
})
</script>
<button>点击</button>
2.2调整窗口大小事件
window.onresize是调整窗口大小加载事件，当触发就调用处理的函数。
window.onresize=function(){}
或者
window.addEventListener('resize',function(){});
注意：
（1）只要窗口大小发生像素变化就会触发这个事件。
（2）我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度。
代码演示：
当窗口宽度小于2000px时盒子隐藏，大于2000px时盒子显现
<!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>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<script>
window.addEventListener('load', function () {
var div = document.querySelector('div');
div.addEventListener('load', function () {
console.log(window.innerWidth); //获取屏幕的宽度
console.log('变化了');
if (window.innerWidth <= 2000) {
div.style.display = 'none'
} else {
div.style.display = 'block'
}
})
})
</script>
<div></div>
</body>
</html>
三.定时器
3.1setTimeOut（）定时器
setTimeOut（）方法用于设置一个定时器，该定时器在定时器到期后执行函数
window.setTimeOut(调用函数，[延迟秒数]);
setTimeOut（）这个函数我们也称为回调函数callback，普通函数就是按照代码顺序直接调用，而这个代码需要等待时间，时间到了再去调用这个函数，因此我们也称其为回调函数。我们之前讲的element.onclick=function(){}也是回调函数。
注意：
（1）window可省略。
（2）这个调用函数可以直接写函数，或者写函数名 或者采取字符串‘函数名（）’但是不推荐第三种。
（3）延迟秒数省略默认是0如果写必须是毫秒。
（4）因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
代码演示：
5s自动关闭广告
<!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>
<img src="../images/桌面壁纸.jpg" alt="" class="ad">
<script>
// 回调函数 需要等待时间，时间到了，才去回头调用这个函数 setTimeout() 以及我们之前学的document.onclick, document.addEventListener('click',function(){})
// 都是回调函数
// setTimeout(调用函数，延迟秒数)，他是一个回调函数callback 时间到了才调用这个函数
var ad = document.querySelector('.ad');
setTimeout(function () {
ad.style.display = 'none';
}, 5000);
</script>
</body>
</html>
3.2setInterval（）定时器
setINterval（）重复调用一个函数，每隔一段时间，就调用一次这个回调函数。
window.setTimeOut(调用函数，[间隔秒数]);
注意：
（1）window可省略。
（2）这个调用函数可以直接写函数，或者写函数名 或者采取字符串‘函数名（）’但是不推荐第三种。
（3）延迟秒数省略默认是0如果写必须是毫秒，表示间隔调用的秒数。
（4）因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
代码演示：
<script>
// 1.window.setInterval(调用函数，延长时间)
setInterval(function () {
console.log('继续输出');
}, 1000);
// 2.setTimeout 到了延长时间就去调用这个函数，只调用一次
// 3.setInterval 每隔这个调用时间就去调用这个函数，重复调用这个函数很多次
</script>
代码案例：
倒计时效果
案例分析：
<!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>
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>
<h3>本场距离结束还剩</h3>
<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('2022-11-26 18:00:00'); //返回用户输入的总毫秒数
countDown(); //我们先调用一次这个函数 防止第一次页面有空白
// 2.开启计时器
setInterval(countDown, 1000); //每隔一秒钟就调用一次这个函数
function countDown() {
var nowTime = +new Date(); //返回当前总毫秒数
var times = (inputTime - nowTime) / 1000;
var h = parseFloat(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
hour.innerHTML = h; //把剩余的小时给小时的黑色盒子
var m = parseFloat(times / 60 % 60);
m = m < 10 ? '0' + m : m;
minute.innerHTML = m; //把剩余的分钟数给分钟的黑色盒子
var s = parseFloat(times % 60);
s = s < 10 ? '0' + s : s;
second.innerHTML = s; //把剩余的秒数给秒的黑色盒子
}
console.log(countDown('2022-11-19 18:00:00'));
var date = new Date();
console.log(date);
</script>
</body>
</html>
3.3清除两种定时器
3.3.1清除setTimeOut定时器
window.clearTimeout(timeoutID)
代码演示：
<!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>点击定时器</button>
<script>
var btn = document.querySelector('button');
var timer = setTimeout(function () {
console.log('爆炸了');
}, 5000);
// 接下来阻止爆炸
btn.addEventListener('click', function () {
clearTimeout(timer); //点击按钮中断倒计时
})
</script>
</body>
</html>
3.3.2清除setInterval()定时器
window.clearInterval(timeoutID)
代码演示：
<!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="end">停止定时器</button>
<script>
var begin = document.querySelector('.begin');
var end = document.querySelector('.end');
var timer = null; //null是一个空对象
begin.addEventListener('click', function () {
timer = setInterval(function () {
console.log('hello');
}, 1000)
})
stop.addEventListener('click', function () {
clearInterval(timer);
})
</script>
</body>
</html>
3.4定时器综合案例
发送短信案例
案例分析：
（1）按钮点击之后，会禁用，disabled为true
（2）同时按钮里面的内容会变化 button里面的值用innerHtml来改变
（3）里面的秒数有变化，因此需要用定时器
（4）定义一个变量，在定时器里面，不断递减
（5）如果变量为0，说明到了时间，需要停止定时器，并且复原按钮
代码演示：
<!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>
手机号码：<input type="text" name="" id=""> <button class="click">点击</button>
<script>
var btn = document.querySelector('button');
var time = 10; //定义剩下的秒数
btn.addEventListener('click', function () {
btn.disabled = true;
var timer=setInterval(function () {
if(time==0){
//清除定时器以及复原按钮
clearInterval(timer);
btn.disabled=false; //这里两个btn都不能改成this 因为他们会指向调用他们的setInterval 而这个默认的其实是window.setInterval,会指向window的
btn.innerHTML='发送';
time=3; //这个3需要重新开始
} else {
btn.innerHTML = '还剩下' + time + '秒';
time--;
}
}, 1000);
})
</script>
</body>
</html>
3.5this指向问题
this指向在函数定义的时候是确定不了得，只有在函数执行的时候，才可以确定this指向的是谁。一般this指向的是我们最终调用的对象。
1.全局作用域或普通函数中指向this指向全局变量window(定时器指向window，他默认前面是有window的，但我们一般不写罢了)
console.log(this); //window
function fn(){
console.log(this);
}
window.fn();
window.setTimeout(function(){
console.log(this);
},1000)
2.方法调用中谁调用this指向谁
var o={
saiHi:function(){
console.log(this); //因为o调用的它，所以我们指向o
}
}
o.saiHi();
var btn=document.querySelector('button');
btn.onclick=function(){
console.log(this); //this指向btn
}
btn.addEventListener('click',function(){
console.log(this); //this指向btn
})
3.构造函数中this指向构造函数的实例
function Fun(){
console.log(this); //this指向的是Fun实例对象
}
var fun=new Fun();
四.JS执行机制
4.1JS是单线程
因为JS单线程的问题，导致执行时间过长，从而引出下面解决方案，同步与异步。
4.2JS同步与异步
4.2.1同步
同步是前一个任务执行完毕后再去执行另一个任务，程序的执行顺序与任务的排列顺序是一致的，同步的。
4.2.2异步
异步是执行一个任务的过程中，其时间很长，于是与此同时在去执行别的任务。
同步与异步的本质区别在于他们在一条流水线上各个流程的执行顺序不同
4.2.3同步任务
同步任务都在主线程上执行，形成一个执行线。
4.2.4异步任务
JS异步是通过回调函数来实现的
一般而言异步任务有以下三种类型：
（1）普通事件 如click resize 等
（2）资源加载 如load error 等
（3）定时器 包括setInterval setTimeOut等
4.3JS执行机制
1.先执行执行栈中的同步任务
2.将执行栈中的异步任务（回调函数）放入任务队列中
3.一旦执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈开始执行
*由于主线程中不断重复获得任务，执行任务，在获得任务执行任务，所以这种机制被称为事件循环
代码展示：
<script>
console.log(1);
document.onclick = function () {
console.log('click');
} //回调函数 异步任务
console.log(2);
setTimeout(function () {
console.log(3);
}, 3000) //回调函数 异步任务
</script>
4.4综合案例
5s自动跳转页面
案例代码：
<!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>点击</button>
<div></div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click', function () {
location.href = 'http://www.baidu.com';
})
var timer = 5;
setInterval(function () { //这里使用setInterval可以重复执行
function fn() {
if (timer == 0) {
location.href = 'http://www.baidu.com';
} else {
div.innerHTML = '您还有' + timer + '即将跳转';
timer--;
}
}
fn();
}, 1000);
</script>
</body>
</html>
