BOM
1.概念:Browser Object Model 浏览器对象模型
2.组成:
*window:窗口对象
*Navigator:浏览器对象
*Screen:显示器屏幕对象
*History:历史记录对象
*Location:地址栏对象
3.window:窗口对象
/*
window:
1.创建
2.方法
1.与弹出框有关的方法:
*alert():警告框
*confirm():确认取消对话框
如果用户点击确定按钮,返回true
如果用户点击取消按钮,返回false
*prompt():提示用户输入的输入框
返回值,获取用户输入的值
2.与开关有关的方法:
*open():打开新窗口
*close():关闭窗口(谁调用我关闭谁)
返回一个新的window对象
3.与定时器有关的方法:
*setTimeout():只会执行一次
*参数:1.js对象或者方法对象
2.毫秒值
*clearTimeout():取消setTimeout设置的定时器
*setInterval():循环执行
*clearInterval()取消setInterval设置的定时器
3.属性:
1.获取其他bom对象
1.history
2.location
3.Navigator
4.Screen
2.获取dom对象
4.特点
*window对象不需要创建可以直接使用
*window引用可以省略。
*/
confirm("您确定要退出吗");
一次性的定时器:
function fun(){
alert("boom")
}
//setTimeout("fun()",3000);
setInterval("fun()",2000)
获取history
var h =window.history;
alert(h);
4.Location:地址栏对象
1.创建:
2.方法
reload():重新加载页面
3.属性
href:设置完整的url路径
5.案例:五秒之后跳转到百度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
text-align: center;
}
span{
color: #ff0033;
}
</style>
</head>
<body>
<p><span id="time">5</span>秒之后跳转到首页</p>
<script>
/*
分析:
1.显示页面效果,p标签,5嵌套span标签
2.倒计时
用一个方法更改秒数
定时器1秒执行一次
当秒数为0时跳转页面
*/
var second = 5;
function fun(){
second--;
if (second<=0){
location.href="https://www.baidu.com";
}
var time = document.getElementById("time");
time.innerText = second+"";
}
setInterval(fun,1000);
</script>
</body>
</html>
6.History:历史记录对象
<body>
<input type="button" id="btn" value="获取历史列表数量">
<script>
/*
1.创建:
window.history
history
2.方法:
back():加载history中前一个url路径
forward():加载history中下一个url路径
go():去往history中指定的url路径
参数:
正数: 前进几个历史记录
负数: 后退几个历史记录
3.属性:
length获取当前窗口历史列表中url的数量
*/
var btn = document.getElementById("btn");
btn.onclick = function (){
var length = history.length;
alert(length);
}
</script>
</body>