9、BOM （浏览器对象模型）
1、认识BOM
js
三个部分：
1、ECMAScript标准 ECMA5 ECMA6
2、BOM Browser Object Model 浏览器对象模型
3、DOM 文档对象类型
window对象下的函数。
alert()
格式：window.alert(参数)
功能：弹出一个警告框，并显示，传入的内容
【注】所有window开头的函数，都可以省略window调用。
window.alert(123);
confirm
格式：window.confirm(参数)
功能：弹出一个带确定和取消的提示框
返回值：点击确定，返回true,点击取消，返回false
/*var res = confirm("我美么？");
alert(res);*/
prompt
格式：window.prompt(参数)
参数：第一个参数，面板上显示的内容，第二个参数，输入框默认值
功能：这是一个带输入框的提示框
返回值：当点击确定，返回，输入的内容。当点击取消，返回null。
/*var res = prompt("请输入一个数", 10)
console.log(res);*/
2、open与opener
window.open("https://www.baidu.com", "百度", "width=400,height=400,top=200,left=200");
三个参数
第一个参数：打开的网站的url
第二个参数：打开的新窗口起个名字（仅仅是起个名字，看不到这个名字）
第三个参数：一串特殊意义字符串。
opener
【注】打开当前窗口的父窗口
<body>
<button onclick = "btnClick();">打开一个新窗口</button>
</body>
<script>
var i = 0;
function btnClick(){
/*
三个参数
第一个参数：打开的网站的url
第二个参数：打开的新窗口起个名字（仅仅是起个名字，看不到这个名字）
第三个参数：一串特殊意义字符串。
*/
window.open("https://www.baidu.com", "百度", "width=400,height=400,top=200,left=200");
/*while(i < 10){
var str = "width=400,height=400,top=" + (200 + 10 * i) + ",left=" + (200 + 10 * i);
window.open("https://www.baidu.com", "百度" + i, str);
i++;
}*/
}
</script>
父窗口：
<style>
body{
background-color: yellow
}
</style>
</head>
<body>
<h1>这里是父窗口</h1>
<button onclick = "btnClick();">打开子窗口</button>
</body>
<script>
function btnClick(){
open("sub.html", "sub", "width=400,height=400,top=200,left=200");
}
</script>
子窗口
<style>
body{
background-color: blue;
}
</style>
</head>
<body>
<h1>这里是子窗口</h1>
<button onclick = "btnClick();">按钮</button>
</body>
<script>
/*
chome不支持
*/
function btnClick(){
// opener 打开当前窗口的父窗口的window对象
// alert(opener);
opener.document.write("我是子窗口");
}
</script>
3、history
window开头的属性也可以省略window
/*alert(window.history);
alert(history);*/
history对象
属性：history.length 当前窗口历史记录中的条数
history.back() 返回上一条记录
history.forward() 前进到下一条记录
history.go();
传参： 0 刷新
正数 前进该条数的记录
负数 返回该条数的记录
// alert(history.length);
function btnBack(){
history.forward();
}
function btnForWard(){
history.back();
}
function btnGo(){
history.go(-2);
}
</script>
</head>
<body>
<button onclick = "btnBack();">前进</button>
<button onclick = "btnForWard();">后退</button>
<button onclick = "btnGo();">GO</button>
</body>
4、location
// alert(window.location === window.document.location);
【注】上述，无论通过任何方式访问到location对象都是同一个。
location对象的属性
location 对象 窗口上的地址栏
url 统一资源定位符。 快递单
完整的url的格式：
https://www.baidu.com:8080/news?today=11&page=1#1
协议://主机名:端口号/路径?查询字符串#锚点
protocol 协议
http://tianyufei.local/qwer/13location.html
*/
// alert(location.protocol);
hostname
www.baidu.com 域名 是为了好记给IP起的别名
61.135.169.125 IP 全球范围内你使用的网络，唯一的标识。
port 端口号 当前电脑的软件在使用软件的时候，会随机分配一个端口号。
浏览器端口号：8080
FTP：2020
// alert(location.hostname);
// alert(location.port);
// alert(location.host);
IP:端口号
pathname 路径名
// alert(location.pathname);
search 查询字符串
?username=tian&password=123
// alert(location.search);
hash 锚点 #100
alert(location.hash);
location 方法
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function btnClick(){
// location.assign("https://www.baidu.com");
// location.replace("https://www.baidu.com");
可以传参，可以传true进行。
如果你传true，代表的是不经过缓存，直接从服务器重载。
location.reload(true);
}
location.assign() 跳转
【注】在本窗口中加载页面，并且会产生历史记录。
location.replace() 替换
【注】在本窗口中加载页面，不会产生历史记录。
location.reload() 重载
</script>
</head>
<body>
<button onclick = "btnClick();">百度</button>
</body>
5、延时器
var ID = setTimeout(函数名, 毫秒数)
参数：1、函数名
2、毫秒数
返回值：该延时器的ID
【注】延迟对应毫秒数以后去执行一次函数，有且仅执行一次。
clearTimeout(ID)
功能：清除延时器。
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
/*
var ID = setTimeout(函数名, 毫秒数)
参数：1、函数名
2、毫秒数
返回值：该延时器的ID
【注】延迟对应毫秒数以后去执行一次函数，有且仅执行一次。
clearTimeout(ID)
功能：清除延时器。
*/
var ID = setTimeout(function(){
alert("五秒到了");
}, 5000);
function btnClick(){
clearTimeout(ID);
}
</script>
</head>
<body>
<button onclick = "btnClick();">取消掉</button>
</body>
6、进度条
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#progress{
width: 600px;
height: 35px;
border: 1px solid black;
margin: 100px auto;
position: relative;
}
#fill{
position: absolute;
width: 0px;
background-color: red;
height: 35px;
left: 0px;
top: 0px;
line-height: 35px;
}
#num{
position: absolute;
right: 0;
color: white;
font-size: 18px
}
</style>
</head>
<body>
<div id = "progress">
<div id = "fill" >
<span id = "num">0%</span>
</div>
</div>
</body>
<script>
var oProgress = document.getElementById("progress");
var oFill = document.getElementById("fill");
var oNum = document.getElementById("num");
var i = 0; //当前的宽
/*
人眼能识别的最小的间隔是18帧，电影院里面放的电影是24帧。
*/
var ID = setInterval(function(){
i = i + 5;
oFill.style.width = i + "px";
//修改百分比
oNum.innerHTML = parseInt((i / 600) * 100) + "%";
if(i == 600){
clearInterval(ID);
}
}, 30);
</script>
