JavaScript BOM
JavaScript BOM
1.windows对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="f()">打开一个新窗口</button>
<button onclick="f2()">关闭</button>
</body>
</html>
<script type="text/javascript">
var win ;
function f(){
win = window.open()
win.document.write("<h1>这是我新打开的窗口</h1>")
}
function f2(){
win.close()
}
//页面加载时间
window.onload=function(){
alert(1)
}
</script>
2.location对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="f()">点击</button>
</body>
</html>
<script type="text/javascript">
function f(){
var win = window.open();
win.location="https://www.baidu.com"
}
</script>
3.history对象
history.forward() 在浏览器历史记录中前往下一个记录
history.back() 和forward()相反
history.go(1) 和forward()等价
history.go(-1) 和back()等价
4.定时器
4.1 一次性定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d1"></div>
<button onclick="f4()">等等</button>
</body>
</html>
<script type="text/javascript">
function w(){
document.getElementById("d1").innerHTML="你好!"
}
var t1=setTimeout("w()",3000);
function f4(){
clearTimeout(t1);
document.getElementById("d1").innerHTML="嘿嘿!"
}
</script>
4.2 循环定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d1"></div>
</body>
</html>
<script type="text/javascript">
function f(){
var d = new Date();
document.getElementById("d1").innerText=d;
}
var i = setInterval("f()",1000)
//clearInterval(i) 取消循环定时器
</script>