BOM

BOM是浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

BOM由一系列对象构成，每个对象都提供了很多方法和属性

BOM缺乏标准

window对象是浏览器的顶级对象，它具有双重角色

首先它是JS访问浏览器窗口的一个接口，并且它也是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的变量和函数

window对象常见对象

窗口加载事件

window.onload是窗口加载事件，当文档内容完全加载完成才会触发该事件

有了window.onload就可以把JS代码写到页面元素上方。不过使用传统事件注册方法时，window.load只能使用一次，如果有一个，会以最后一个window.onload为准。要用多次，则用事件监听方式

document.addEventListener（'DOMContentLoaded'，function(){}）是仅当DOM加载完成（不包括样式表、图片、flash等）后触发事件

其好处是当页面图片较多时，改善用户体验，不过注意，需要浏览器IE9以上

调整窗口大小事件

window.onresize是调整浏览器窗口大小加载事件，当触发时会调用处理函数

常用这个事件完成响应式布局。

window.innerWidth表示当前屏幕宽度

定时器

setTimeout()

setTimeout(调用函数，[延迟的毫秒数])

setTimeout()用于设置一个定时器，该定时器在定时器到期之后执行调用函数,延迟时间单位是毫秒，可以省略，默认为0，这个调用函数可以直接写函数，也可以写函数名

页面中可能有很多定时器，可以给不同定时器设定不同的标识符

setTimeout()也是回调函数，需要等待时间，时间到了才执行的被称为回调函数

例子：五秒之后自动消失的图片

	<body>
		<script>
			window.onload=function(){
				var pic=document.querySelector('img');
				setTimeout(function(){
					pic.style.display='none';
				},5000);
			}
		</script>
		<img src="img/t1.jpg" />
	</body>

可以使用window.clearTimeout（定时器标识符）停止计时器

setInterval（）

setInterval（调用函数，[间隔的毫秒数]）

重复调用一个函数，每隔一段时间就调用一次回调函数，,间隔时间单位是毫秒，可以省略，默认为0，调用函数可以直接写函数，也可以写函数名，页面中可能有很多定时器，可以给不同定时器设定不同的标识符

注意，第一次执行时也有间隔毫秒数，因此刚刚刷新页面会有空白，所以可以采用封装函数的方式，然后先调用一次函数，防止刷新时间页面有空白

实例：倒计时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 230px;
				margin: 100px auto;
			}
			span{
				width: 40px;
				height: 40px;
				background-color: #000000;
				display: inline-block;
				color: white;
				text-align: center;
				line-height: 40px;
			}
		</style>
	</head>
	<body>
		<div>
			<span class='day'>0</span>天
			<span class='hour'>1</span>：
			<span class='minute'>2</span>：
			<span class='s'>3</span>
		</div>
		<script type="text/javascript">
			var d=document.querySelector('.day');
			var h=document.querySelector('.hour');
			var m=document.querySelector('.minute');
			var s=document.querySelector('.s');
			var date2=new Date('2022-3-31 12:0:0');
			time();
			setInterval(time,1000);
			function time(){
				var date1=new Date();
				var t1=date1.getTime();
				var t2=date2.getTime();
				var t=(t2-t1)/1000;
				var day=parseInt(t/60/60/24);
				var hour=parseInt(t/60/60%24);
				var m1=parseInt(t/60%60);
				var s1=parseInt(t%60);
				h.innerHTML=hour;
				d.innerHTML=day;
				m.innerHTML=m1;
				s.innerHTML=s1;
			}
			
		</script>
	</body>
</html>

可以用window.clearInterval（计时器名字）清除该计时器