BOM：浏览器对象模型（Browser Object Model ）
用于对浏览器的操作，提供了独立于内容而与浏览器交互的内容，其核心对象是window。
BOM常用对象：
window : alert() , prompt() , confirm() , setInterval() , clearInterval() , setTimeout() , clearTimeout() ;
history : go(参数) , back() , foward() ;
location : herf属性.
1、它是js访问浏览器窗口的一个接口
2、它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。
（1）窗口加载事件：
window.onload = function() {} 或
window.addEventLisrener("load",function() { });
document.addEventLisrener('DOMContentLoaded',function()) {};
注意：
1、window.onload是窗口加载事件，当文档内容完全加载完成会触发该事件，就调用处理函数。
2、window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
3、addEventLisrener没有次数限制。
"load"等页面内容全部加载完毕，包含页面DOM元素，图片，flash，css等等。
DOMContentLoaded 是DOM加载完毕，不包含flash,css等就可以执行，记载速度比load更快一点。
<!DOCTYPE html> <html> <head> <title>页面加载事件</title> <meta charset="utf-8"> <script> window.onload = function() { var btn = document.querySelector('button'); btn.addEventListener('click',function(){ alert('我被显示辣！！'); }) } window.addEventListener('load',function() { alert('我可以显示一遍！'); }) window.addEventListener('load',function() { alert('我可以显示两遍！！'); }) document.addEventListener('DOMContentLoaded',function() { alert('我老快了！') }) </script> </head> <body> <button>点我！</button> </body> </html>（2）调整窗口大小事件： window.onresize = function() { } window.addEventListener("resize",function(){});
正常宽度： 窗口宽度小于600像素时：
实现：
<!DOCTYPE html> <html> <head> <title>页面加载事件</title> <meta charset="utf-8"> <style> div { width:200px; height: 200px; background-color: pink; } </style> <script> window.addEventListener('load',function(){ //先后获取div对象 var div = document.querySelector('div'); //添加事件 window.addEventListener('resize',function(){ //如果窗口宽度小于600像素 if(window.innerWidth <= 600){ div.style.display = 'none'; }else { div.style.display = 'block'; } }) }) </script> </head> <body> <div></div> </body> </html>（3）定时：
①setTimeout定时器：
window.setTimeout(调用函数，[延迟的毫秒数]);
window.clearTimeout(定时器名字);
效果：
实现：
<!DOCTYPE html> <html> <head> <title>定时函数的使用</title> <meta charset="utf-8"> </head> <body> <script> function timer() { alert('时间到了'); } var timer1 = setTimeout(timer,2000); //关闭定时器 //clearTimeout(timer1); </script> </body> </html>②setInterval(调用函数，[延迟的毫秒数])定时器：
每隔一段时间，都会调用这个函数。
<!DOCTYPE html> <html> <head> <title>定时函数的使用</title> <meta charset="utf-8"> </head> <body> <script> function timer() { alert('时间到了'); } var timer1 = setInterval(timer,2000); //关闭定时器 //clearInterval(timer1); </script> </body> </html>在网页中弹出广告几秒后再消失：
弹出广告时的效果:
实现：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,intial-scale=1"> <title>注册网页</title> <style type="text/css"> body { width: 1200px; height: 1200px; margin: 0 auto; border: 1px solid lightsalmon; background-color: azure; } .dd1 { height: 60px; border: 1px solid pink; float: left; /*设置向左浮动*/ } .dd2 { width: 1200px; height: 60px; background-color: black; border: 1px solid palevioletred; } a { text-decoration: none; } /* 清除浮动 */ #clear { clear: both; } </style> <script> function init() { //定时轮播图片 setInterval("changeImg()",2000); //1.设置广告图片定时显示 time = setInterval("showAd()",2000); } //轮播图片函数 var i=0; function changeImg() { i++; document.getElementById("img1").src="s"+i+".jpg"; if(i==3){ i=0; } } //2.广告显示函数 function showAd(){ //3.确定广告图片的位置 var pos = document.getElementById("img2"); //4.修改广告图片属性让其显示 pos.style.display = "block"; //5.清除显示广告的定时操作 clearInterval(time); //6.设置隐藏图片的定时操作 time = setInterval("hiddenAd()",2000); } //7.隐藏广告图片的函数 function hiddenAd() { //8.获取广告图片并设置其style属性的display值为none document.getElementById("img2").style.display = "none"; //9.清除隐藏广告图片的定时操作 clearInterval(time); } </script> </head> <body onload="init()"> <!--第一层--> <div> <img src="p1.jpg" height="400px" width="1200px" id="img2" style="display:none"/> <div class="dd1"> <img src="tb1.png" width="398px" height="60px" /> </div> <div class="dd1"> <img src="tb2.png" width="398px" height="60px" /> </div> <div class="dd1"> <img src="tb3.png" width="398px" height="60px" /> </div> </div> <!-- 清除浮动 --> <div id="clear"></div> <!--第二层--> <div class="dd2"> <p> <a href="#"><font color="white" size="5px"> 首页 </font></a> <a href="#"><font color="white" size="3px">手机数码</font></a> <a href="#"><font color="white" size="3px">电脑办公</font></a> <a href="#"><font color="white" size="3px">鞋靴箱包</font></a> <a href="#"><font color="white" size="3px">家用电器</font></a> </p> </div> <!-- 第三层 --> <div> <img src="s1.jpg" width="1200px" height="715px" id="img1" /> </div> </body> </html>页面的跳转，点击链接跳转到下一个网页，再通过history的go()，或者back()方法跳转回来
效果：
实现：
页面跳转：
<!DOCTYPE html> <html> <head> <title>页面转换</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> <a href="history.html">点我啊！</a> </body> </html>history：
<!DOCTYPE html> <html> <head> <title>history</title> <meta charset="utf-8"> <script> function fanhui() { //history.go(-1); //方法一 history.back(); } </script> </head> <body> <input type="button" value="返回上一页" onclick="fanhui()"> </body> </html>
