JS--BOM

最新推荐文章于 2024-07-11 18:56:17 发布

小伟呀

最新推荐文章于 2024-07-11 18:56:17 发布

阅读量79

点赞数

分类专栏： JS 文章标签： js

本文链接：https://blog.csdn.net/weixin_43879167/article/details/113518554

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

一、window对象
二、location对象
三、计时器setinterval、clearinterval、setTimeout与clearTimeout
四、其它对象
五、简单实现一个网页计时器

【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>

效果展示：
在这里插入图片描述

当按下停止按钮时，时间将不再变化。

小伟呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS--BOM

文章目录一、window对象二、location对象三、计时器setinterval、clearinterval、setTimeout与clearTimeout三、其它对象【BOM：browser object model 可理解为浏览器的对象】一、window对象最大的BOM对象，JS的顶层对象使用时可以省略window<!DOCTYPE html><html> <head> <meta charset="utf-8"> <t
复制链接

扫一扫

专栏目录