文章目录
【BOM:browser object model 可理解为浏览器的对象】
一、window对象
- 最大的BOM对象,JS的顶层对象
- 使用时可以省略window
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.alert("a");
window.confirm("b");
window.prompt("c");
alert("a");
confirm("b");
prompt("c");
</script>
</head>
<body>
</body>
</html>
二、location对象
- (1)
location.href
发生页面的跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function f1() {
location.href = "test1.html"
}
</script>
</head>
<body>
<button onclick="f1()">按钮</button>
</body>
</html>
初始界面:
点击按钮后的界面:
href里面写的即为要跳转的路径 。
- (2)页面刷新
(1)location.reload();
(2)location.href = location.href;
这两句是等价的,都是页面的刷新。
三、计时器setinterval、clearinterval、setTimeout与clearTimeout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var m1;
function f1() {
m1 = setInterval(function() {
console.log(new Date().toLocaleString());
}, 1000)
}
function f2() {
clearInterval(m1);
}
var m2;
function f3() {
m2 = setTimeout(function() {
console.log(new Date().toLocaleString());
}, 2000)
}
function f4(){
clearTimeout(m2);
}
</script>
</head>
<body>
<button onclick="f1()">启动</button>
<button onclick="f2()">停止</button>
<button onclick="f3()">启动1</button>
<button onclick="f4()">停止1</button>
</body>
</html>
(1)setinterval是计时器,第一个参数是方法,第二个参数为时间间隔,按毫秒算。意思是每隔一段时间(第二个参数)执行一次方法(第一个参数);
(2)clearinterval时停止计时,执行此方法后setInterval停止执行;
(3)setTimeout是延迟执行,意思是程序启动后经过一段时间后执行一次方法;
(4)clearTimeout和setTimeout对应,在setTimeout执行后的延迟时间内再执行clearTimeout,则setTimeout不会再执行。
四、其它对象
window.history
,浏览器访问历史信息window.navigator
,浏览器本身的信息window.screen
,浏览器屏幕信息
五、简单实现一个网页计时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>timer</title>
<script type="text/javascript">
var f1= function(){
var date = new Date();//获取到当前时间
var s = date.toLocaleString();//时间转换为字符串
document.getElementById("1").innerText = s;
}
var x = setInterval(f1,1000);
function stop(){
clearInterval(x);
}
</script>
</head>
<body>
<button onclick="stop()">停止</button>
<div id="1"></div>
</body>
</html>
效果展示:
当按下停止按钮时,时间将不再变化。