JavaScript基础_11（BOM对象2）

于 2020-11-26 15:56:51 发布
阅读量130 收藏
点赞数
分类专栏： javascript基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44906261/article/details/110187183
版权

JavaScript中的BOM对象（2）

一、Window 对象

1、属性

2、方法

3、子对象

（1）Window Screen–屏幕
（2）Window Location—页面的地址 (URL)
（3）Window History—历史对象

  • window.history 对象包含浏览器的历史信息。

  • history.back() - 与在浏览器点击后退按钮相同

  • history.forward() - 与在浏览器中点击按钮向前相同
    第一个页面：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
				//前进
				function toNext(){
					window.history.forward();
				}
		</script>
	</head>
	<body>
		<h1>第一个测试页面</h1>
		<a href="test1.html">连接到第一个测试页面</a><br>
		<input type="button" value="前进" onclick="toNext();"/>
	</body>
</html>

    第二个页面：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
				//前进
				function toNext(){
					window.history.forward();
				}
				//后退
				function toBack(){
					window.history.back();
				}
		</script>
	</head>
	<body>
		<h1>第二个测试页面</h1>
		<a href="test2.html">连接到第三个测试页面</a><br>
		<input type="button" value="前进" onclick="toNext();"/>
		<input type="button" value="后退" onclick="toBack();"/>
	</body>
</html>

    第三个页面：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
				//后退
				function toBack(){
					window.history.back();
				}
		</script>
	</head>
	<body>
		<h1>第三个测试页面</h1>
		<input type="button" value="后退" onclick="toBack();"/>
	</body>
</html>

    在这里插入图片描述
    注意:前进history.forward()和后退history.back()在同一个窗口中的页面才有效。

（4）Window Navigator–浏览器的信息

  • window.navigator 对象包含有关访问者浏览器的信息。

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		document.write("<h1>浏览器代号:"+window.navigator.appCodeName+"</h1>");
		document.write("<h1>浏览器名称:"+window.navigator.appName+"</h1>");
		document.write("<h1>浏览器版本:"+window.navigator.appVersion+"</h1>");
		document.write("<h1>启用Cookies:"+window.navigator.cookieEnabled+"</h1>");
		document.write("<h1>硬件平台:"+window.navigator.platform+"</h1>");
		document.write("<h1>用户代理:"+window.navigator.userAgent+"</h1>");
		document.write("<h1>用户代理语言:"+window.navigator.systemLanguage+"</h1>");
		</script>
	</head>
	<body>
	</body>
</html>

    在这里插入图片描述

4、JavaScript 计时事件

  • 通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
  • 在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
    setInterval() -间隔指定的毫秒数不停地执行指定的代码。
    setTimeout() - 暂停指定的毫秒数后执行指定的代码
  • 注意：setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

（1）setInterval() 方法

  • setInterval(“function”,milliseconds) 间隔指定的毫秒数不停地执行指定的代码。

  • 参数1-指定的运行代码是一个function

  • 参数2-指定的毫秒数

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function testsetInterval(){
				var hobj=document.getElementById("test1");
				setInterval(function(){
					var date=new Date();
					var year=date.getFullYear();
					var month=date.getMonth()+1;
					var mydate=date.getDate();
					var hours=date.getHours()
					var minutes=date.getMinutes();
					var seconds=date.getSeconds();
					var time=year+"年"+month+"月"+mydate+"日 "+hours+":"+minutes+":"+seconds;
					hobj.innerHTML=time;
				},1000);
			}
		</script>
	</head>
	<body>
		<h1 id="test1"></h1>
		<input type="button" value="测试setInterval()————1" onclick="testsetInterval();"/>
	</body>
</html>

    将setInerval()方法中执行运行的代码抽取成一个函数。

    		<script>
			function testsetInterval(){
				var hobj=document.getElementById("test1");
				function mygetDate(){
					var date=new Date();
					var year=date.getFullYear();
					var month=date.getMonth()+1;
					var mydate=date.getDate();
					var hours=date.getHours()
					var minutes=date.getMinutes();
					var seconds=date.getSeconds();
					var time=year+"年"+month+"月"+mydate+"日 "+hours+":"+minutes+":"+seconds;
					hobj.innerHTML=time;
				}
				setInterval(function(){mygetDate();},1000);
			}
		</script>

    在这里插入图片描述

（2）clearInterval(intervalVariable) 方法

  • clearInterval(intervalVariable) 方法用于停止 setInterval() 方法执行的函数代码。

  • 参数intervalVariable— setInterval()的返回值。

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var mysetinterval=null;
			function testsetInterval(){
				var hobj=document.getElementById("test1");
				function mygetDate(){
					var date=new Date();
					var year=date.getFullYear();
					var month=date.getMonth()+1;
					var mydate=date.getDate();
					var hours=date.getHours()
					var minutes=date.getMinutes();
					var seconds=date.getSeconds();
					var time=year+"年"+month+"月"+mydate+"日 "+hours+":"+minutes+":"+seconds;
					hobj.innerHTML=time;
				}
				mysetinterval=setInterval(function(){mygetDate();},1000);
			}
			//停止setInterval
			function  testclearInterval(){
				clearInterval(mysetinterval);
			}
		</script>
	</head>
	<body>
		<h1 id="test1"></h1>
		<input type="button" value="测试setInterval()" onclick="testsetInterval();"/>
		<input type="button" value="停止clearInterval()" onclick="testclearInterval();"/>
	</body>
</html>

    在这里插入图片描述

（3）setTimeout() 方法

  • 暂停指定的毫秒数后执行指定的代码

  • 参数1–指定运行的代码

  • 参数2–指定的毫秒数

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
					var mytestsetTimeout=null;
					function testsetTimeout(){
						var hobj=document.getElementById("test1");
						function mygetDate(){
							var date=new Date();
							var year=date.getFullYear();
							var month=date.getMonth()+1;
							var mydate=date.getDate();
							var hours=date.getHours()
							var minutes=date.getMinutes();
							var seconds=date.getSeconds();
							var time=year+"年"+month+"月"+mydate+"日 "+hours+":"+minutes+":"+seconds;
							hobj.innerHTML=time;
						}
						mytestsetTimeout=setTimeout(function(){mygetDate();},3000);
					}
		</script>

	</head>
	<body>
		<h1 id="test1"></h1>
		<input type="button" value="测试" onclick="testsetTimeout();"/>
	</body>
</html>

    在这里插入图片描述

（4）clearTimeout(timeoutVariable) 方法

  • clearTimeout(timeoutVariable) 方法用于停止执行setTimeout()方法的函数代码。

  • 参数timeoutVariable----setTimeout方法的返回值。

		<script>
			var mytestsetTimeout=null;
			function testsetTimeout(){
				var hobj=document.getElementById("test1");
				function mygetDate(){
					var date=new Date();
					var year=date.getFullYear();
					var month=date.getMonth()+1;
					var mydate=date.getDate();
					var hours=date.getHours()
					var minutes=date.getMinutes();
					var seconds=date.getSeconds();
					var time=year+"年"+month+"月"+mydate+"日 "+hours+":"+minutes+":"+seconds;
					hobj.innerHTML=time;
				}
				mytestsetTimeout=setTimeout(function(){mygetDate();},3000);
			}
			//停止setInterval
			function  testclearTimeout(){
				clearTimeout(mytestsetTimeout);
			}
		</script>

在这里插入图片描述

进击的菜鸟@
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值