-
BOM
浏览器对象模型，将浏览器的各个组成部分封装为对象（地址栏、窗口等）
组成：
Window（窗口）
Navigator（浏览器）
Screen（屏幕）
History（历史记录）
Location（地址栏）
-
WINDOW对象
不需要创建，可直接使用（window.方法名()或者直接方法名()）
方法：
1.与弹出窗口有关
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
2.与打开关闭有关
close() 关闭浏览器窗口。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
3.定时器
setTimeout(js代码，毫秒数) 在指定的毫秒数后调用函数或计算表达式，。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*alert("hello window");
window.alert("hey bb");*/
//确定则返回，true反之为false
//confirm("Are you ready?");
//输入框
prompt("请输入用户名");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="openb" type="button" value="打开窗口">
<input id="closeb" type="button" value="关闭窗口">
<script>
var openbtn = document.getElementById("openb");
var newwindow;
openbtn.onclick = function (){
//open返回一个新的窗口对象
newwindow = open("http://www.baidu.com");
}
var closebtn = document.getElementById("closeb");
closebtn.onclick = function (){
//关闭当前窗口，谁调用我我关谁
newwindow.close();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//返回一个唯一标识，用于取消定时器
//var id = setTimeout(fun,3000);
//clearTimeout(id);
function fun() {
alert("hahaha");
}
//循环计时器，每多少时间执行一次
var id = setInterval(fun,2000);
clearInterval(id);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
//修改图片的src属性
var number = 1;
function fun(){
number++;
if(number>3){
number=1;
}
var img = document.getElementById("banner1");
img.src = "img/"+number+".jpg"
}
//定义定时器
setInterval(fun,2000);
</script>
</head>
<body>
<img src="img/1.jpg" id="banner1" width="70%">
</body>
</html>
-
Window属性
获取其他BOM对象：history，location，navigator，screen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
//获取history对象
var h1 = history;
//alert(h1);//Object History
//获取DOM对象
var mi = document.getElementById("myimg");
//alert(mi);
/*获取Location对象
方法：
assign()：加载新的文档。
reload()：重新加载当前文档。
replace()：用新的文档替换当前文档。
属性：
href：设置或返回完整的 URL。
* */
</script>
</head>
<body>
<img src="img/4.jpg" id="myimg">
<input type="button" id="flash" value="刷新页面">
<input type="button" id="gohttp" value="去百度">
<script>
var btn1 = document.getElementById("flash");
btn1.onclick = function (){
//刷新页面
location.reload();
}
//获取href
var href1 = location.href;
alert(href1);
var btn2 = document.getElementById("gohttp");
btn2.onclick = function (){
//转到百度页面
location.href = "http://www.baidu.com";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
<script>
//倒计时读秒效果
var s = 5;
var time = document.getElementById("time");
function showtime(){
s--;
if(s<=0){
location.href = "http://www.baidu.com";
}
time.innerHTML = s;
}
//计时器
setInterval(showtime,1000);
</script>
</head>
<body>
<p>
<span id="time">5</span>秒之后，跳转百度。。。。
</p>
</body>
</html>
-
History对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="btn" value="获取历史记录个数">
<input type="button" id="btn2" value="前进">
<a href="http://www.baidu.com">百度一下</a>
<script>
/*属性：
length：返回当前窗口浏览器历史列表中的 URL 数量。
方法：
back()：加载 history 列表中的前一个 URL。
forward()：加载 history 列表中的下一个 URL。
go(number|URL)：加载 history 列表中的某个具体页面。
* */
//获取历史记录个数
var btn = document.getElementById("btn");
btn.onclick = function (){
alert(history.length);
}
//前进
var btn2 = document.getElementById("btn2");
btn2.onclick = function (){
history.forward();
}
</script>
</body>
</html>