## BOM
1、概念：Browser Object Model 浏览器对象模型
* 将浏览器组成的对象封装成BOM
2、组成：
* Window：窗口对象
* Navigator：浏览器对象
* Screen：显示器屏幕对象
* History：历史记录对象
* Location：地址栏对象
3、Window：窗口对象
<script>
/*
Window：窗口对象
1、创建
2、方法
1、与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，方法返回true
* 如果用户点击取消按钮，方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值：用户输入的值。
2、与打开关闭有关的方法：
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
* 返回一个新的window对象
close() 关闭浏览器窗口。
* 谁调用我，我关闭谁
3、与定时器有关的方法：
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数：
1、js代码或者方法对象
2、毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
3、属性
1、获取其他BOM对象：
history
location
Navigator
Screen
2、获取DOM对象
document
4、特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。 方法名();
*/
/*alert("hello window");*/
/*confirm("您确定要退出吗？");*/
//一次性定时器
/*setTimeout("alert('111')",3000);
setTimeout(function () {
alert("boom!!");
},1000)*/
//循环定时器
/*var interval = setInterval(function () {
alert("炸啦!");
},2000);
//取消循环定时器
clearInterval(interval);*/
//获取history
var h2 = history;//var h1 = window.history;
</script>
轮播图案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <script> window.onload = function () { //修改图片src属性 var num = 1; function fun() { num++; if (num > 3){ num = 1; } //获取id对象能在图片加载前完成，因为定义在方法中，方法需要三秒之后执行 var img = document.getElementById("img"); img.src = "imgs/banner_"+num+".jpg"; } setInterval(fun,3000); } </script> </head> <body> <img id="img" src="imgs/banner_1.jpg" width="100%"> </body> </html>
4、Location：地址栏对象
1、创建（获取）：
1、window.location
2、location
2、方法：
* reload() 重新加载当前文档。刷新
3、属性
* href 设置或返回完整的URL
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Location对象</title> <script> // reload方法，定义一个按钮，点击按钮刷新页面 window.onload = function () { var btn = document.getElementById("btn"); var bd = document.getElementById("bd"); btn.onclick = function () { location.reload(); } var href = location.href; //alert(href); bd.onclick = function () { location.href = "https://www.baidu.com"; } } </script> </head> <body> <input type="button" id="btn" value="刷新"> <input type="button" id="bd" value="百度一下"> </body> </html>
跳转首页案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跳转首页案例</title> <style> p { text-align: center; } span { color: red; } </style> <script> window.onload = function () { var second = 5; var time = document.getElementById("time"); setInterval(function () { second--; if (second <= 0){ location.href = "https://www.baidu.com"; } time.innerHTML = second; }, 1000); } </script> </head> <body> <p> <span id="time">5</span>秒之后，自动跳转到首页... </p> </body> </html>
4、History：历史记录对象
1、创建（获取）：
1、window.history
2、history
2、方法：
back() ：加载history列表中的前一个URL
forward()：加载history列表中的下一个URL
go()：加载history列表中的某个具体页面
* 参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录
3、属性：
* length 返回当前窗口历史列表中的URL数量。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>History对象</title> <script> window.onload = function () { var btn = document.getElementById("btn"); btn.onclick = function () { var length = history.length; alert(length); } var forward = document.getElementById("forward"); forward.onclick = function () { history.go(1);//history.forward(); } } </script> </head> <body> <input id="btn" type="button" value="获取历史记录个数"> <a href="轮播图.html">轮播图页面</a> <input id="forward" type="button" value="前进"> </body> </html>