Bom：瀏覽器對象模型（Browser Object Model，簡稱 BOM）提供了獨立於內容而與瀏覽器窗口進行交互的對象。描述了與瀏覽器進行交互的方法和接口，可以對瀏覽器窗口進行訪問和操作
（1）window對象：當前瀏覽器窗體
屬性：
status：狀態欄(目前瀏覽器已棄用了）
opener：即誰打開我的，若在A用open打開B則B的opener就是A
closed：判斷子窗體是否關閉
方法：
alert() 彈出框
confirm() 帶確認,取消彈出框
setInterval() 每隔多少秒調用一次
clearInterval() 清除setInterval
setTimeout() 隔多少秒調用一次
cleartimeout() 清除setTimeout
open() 打開一個新的窗口
eg : window.open("other.html"," _blank","width=200,height=300,top=300");
console:最常用的就是console.log()瀏覽器控制台打印
（2）子對象：doument loation history screen ……
1、 doument （講dom已經介紹過它的屬性方法 ，有感興趣的可以翻看dom操作）
2、 loation 跳轉位置
<meta http-equiv="refresh" content="3; url =http://www.hteis.cn";> //不加url指3秒刷新一次，加url指3秒跳轉
window.location.href="popl.html";
location = pop.html
location.replace("pop.html") //瀏覽器不可以后退
3、 history 歷史
history.back() == history.go(-1) //返回到前一頁
history.go(-2) //括號里的參數負幾就是返回前幾步
eg: <a href="javascript:history.back()">返回上一頁</a>
<a href="javascript:history.go(-2)">第一頁</a>
4、 screen //屏幕
screen.availHeight //屏幕實際高度
screen.availWidth //屏幕實際寬度
screen.height //屏幕高度
screen.width //屏幕寬度
console.log("屏幕實際高度"+screen.availHeight);
console.log("屏幕實際寬度"+screen.availWidth);
console.log("屏幕高度"+screen.height);
console.log("屏幕寬度"+screen.width);
最后賦一個使用計時器做的小例子，跑馬燈和小球運動效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#one{
width:100px;
height: 100px;
background-color: red;
position: fixed;
left:0;
top:0;
border-radius: 50%;
}
#two{
width:100px;
height:20px;
background-color: #0f0;
position: fixed;
right:10px;
top:10px;
}
html,body{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two">跑起來</div>
<script>
var x = 0;
var y = 0;
var xs=10;
var ys=10;
var left = document.body.clientWidth;
var one = document.getElementById("one");
var two = document.getElementById("two");
function move(){
x += xs;
y += ys;
if(x >= document.body.clientWidth-one.offsetWidth-20 || x < 0){
xs=-1*xs;
}
if(y >= document.body.clientHeight-one.offsetHeight-20 || y < 0){
ys=-1*ys;
}
one.style.left = x+"px";
one.style.top = y+"px";
}
var dt = setInterval("move()",100);
one.onmouseover = function(){
clearInterval(dt)
}
one.onmouseout = function(){
dt = setInterval("move()",100);
}
//跑馬燈
function leftMove(){
if(left <=100){
left = document.body.clientWidth;
}
left=left-10;
two.style.left = left+"px";
}
var dl = setInterval("leftMove()",100);
two.onmouseover = function(){
clearInterval(dl);
}
two.onmouseout = function(){
dl = setInterval("leftMove()",100);
}
</script>
</body>
</html>
若有錯誤歡迎留言指正
作者：BlancheWang
出處：http://www.cnblogs.com/hhw3
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接。