BOM概念：
browser object model浏览器对象模型
将浏览器的各个组成部分封装成对象；
window：窗口对象
history：历史记录对象
location：地址栏对象
screen：显示器屏幕对象
navigator：浏览器对象
特点：可以直接通过方法名，也可以通过window点+方法名
<html>
<title>
widows对象
</title>
<head>
<script>
alert("欢迎使用直接通过方法名");
alert("欢迎使用window调用·方法")
</script>
</head>
<body>
</body>
</html>
上述代码会提示来此警告窗口
三种常见方法：
1.与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
- 如果用户点击确定按钮，则方法返回true
- 如果用户点击取消按钮，则方法返回false
```javascript
<html>
<title>
widows对象
</title>
<head>
<script>
var flag=confirm("你确定要退出吗")
if(flag){
alert("你点击了确定")
}else{
alert("你点击了取消")
}
</script>
</head>
<body>
</body>
</html>
prompt() 显示可提示用户输入的对话框。
<html>
<title>
widows对象
</title>
<head>
<script>
var flag=prompt("请输入你的账号")
alert(flag)
</script>
</head>
<body>
</body>
</html>
通过将输入的值放入flag中，然后在弹出所输入的内容
2. 与打开关闭有关的方法：
close() 关闭浏览器窗口。
* 谁调用我 ，我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="openBtn" type="button" value="打开窗口">
<input id="closeBtn" type="button" value="关闭窗口">
</body>
<script>
//打开新窗口
var openBtn = document.getElementById("openBtn");
openBtn.onclick = function(){
//打开新窗口
open("https://www.baidu.com");
}
//关闭窗口
var closeBtn=document.getElementById("closeBtn");
closeBtn.onclick=function (ev) {
close();
}
</script>
</html>
当我们点击关闭按钮的时候会将有两个按钮的浏览器关闭，而不关闭新打开的窗口。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="openBtn" type="button" value="打开窗口">
<input id="closeBtn" type="button" value="关闭窗口">
</body>
<script>
//打开新窗口
var newwidow;
var openBtn = document.getElementById("openBtn");
openBtn.onclick = function(){
//打开新窗口
newwidow=open("https://www.baidu.com");
}
//关闭窗口
var closeBtn=document.getElementById("closeBtn");
closeBtn.onclick=function (ev) {
newwidow.close();
}
</script>
</html>
我们只需要将新打开的浏览器对象用var存一下，然后在关闭函数中用newwidow点close（）方法就可以关闭新打开的窗口了
3. 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数：
1. js代码或者方法对象
2. 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
案例
/*
分析：
1.在页面上使用img标签展示图片
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每隔3秒调用方法一次。
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var num=1;
function turn(){
num++;
if(num>3){
num=1;
}
var Image=document.getElementById("img");
Image.src="img/imag_"+num+".jpg";
}
setInterval(turn,2000);
</script>
</head>
<body>
<img src="img/imag_1.jpg" width="100%" id="img"/>
</body>
</html>
常见属性：
1. 获取其他BOM对象：
history
location
Navigator
Screen:
2. 获取DOM对象
document
1. 创建(获取)：
1. window.location
2. location
2. 方法：
* reload() 重新加载当前文档。刷新
3. 属性
* href 设置或返回完整的 URL。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" id="refresh" value="刷新"/>
<input type="button" id="go" value="去百度"/>
</body>
<script>
var refresh=document.getElementById("refresh");
refresh.onclick=function(){
location.reload();
}
var go=document.getElementById("go");
go.onclick=function(){
location.href="https://blog.csdn.net/qq_45353823";
}
</script>
</html>
综合上述的学习之页面跳转的案例
实现思路：
1.首页用p标签包裹内容
2.数字单独用span标签包裹
3.然后用css代码修改样式
4.然后通过js代码，对于span包裹的数字进行改变，可以用innerHTML，然后用setInterval去循环让数字变小
5.当数字小于等于0时，我们可以用location.href去改变浏览的地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<p>
<span id="time">5</span>秒后，自动跳转到我的博客主页！
</p>
</body>
<script>
var time=document.getElementById("time");
var num=5;
function f(){
num--;
if(num<=0){
location.href="https://blog.csdn.net/qq_45353823";
}
time.innerHTML=num;
}
setInterval(f,1000)
</script>
</html>
