1.BOM定义
全称:browser object model(浏览器对象模型),BOM提供了独立于内容而与浏览器窗口进行交互的接口,由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window。window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的。
2.BOM对象体系图:
3.window对象
(1)常用方法
alert()、confirm()、open() close()
定时器:
setInterval:定时启动指定函数,并循环执行
clearInterval:停止定时器setInterval
setTimeout:定时启动指定函数,延时执行,只执行一次
clearTimeout:停止定时器setTimeout
计时器
html代码:
<span>时间:</span>
<span id="m">0</span>
<span>:</span>
<span id="s">0</span>
<span>:</span>
<span id="hao">0</span><br>
<button id="begin">开始</button>
<button id="pause">暂停</button>
<button id="stop">停止</button>
js代码:
<script type="text/javascript">
var m = document.getElementById("m");
var s = document.getElementById("s");
var hao = document.getElementById("hao");
var begin = document.getElementById("begin");
var pause = document.getElementById("pause");
var stop = document.getElementById("stop");
var v1 = 0,
v2 = 0,
v3 = 0;
//定义一个标记,来暂停操作
var flag = false;
var interval = null;
begin.onclick = function() {
flag = true;
interval = window.setInterval(function() {
if(flag) {
//如果毫秒级到了100,则秒进1
if(v3 == 100) {
v2++;
v3 = 0;
}
//如果秒到了60,则分钟进1
if(v2 == 60) {
v1++;
v2 = 0;
}
v3++;
m.innerText = v1;
s.innerText = v2;
hao.innerText = v3;
}
}, 10);
}
//暂停
pause.onclick = function() {
flag = false;
}
//停止,归零
stop.onclick = function() {
window.clearInterval(interval);
v1 = 0;
v2 = 0;
v3 = 0;
m.innerText = v1;
s.innerText = v2;
hao.innerText = v3;
}
</script>
测试效果:
(2)常用属性:status、opener、closed等
(3)常用子对象:document、screen、location、history、frames等
history对象
history.go(1)前进
history.go(0)刷新
history.go(-1)后退
screen 对象
document.write("屏幕的高度是:"+ screen.availHeight+" "+"屏幕的宽度是:"+screen.availWidth);
location 对象
//类似document的URL属性
location.href="http://baidu.com";
//重新加载页面
location.reload(true);