javascriptBOM

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);