JavaScript_11(BOM完)

最新推荐文章于 2024-07-16 19:07:40 发布
最新推荐文章于 2024-07-16 19:07:40 发布
阅读量113 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45872868/article/details/110186840
版权

JavaScript_11（BOM）

1. 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="index2.html">连接到第一个测试页面</a><br>
		<input type="button" value="前进" οnclick="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="index3.html">连接到第三个测试页面</a><br>
		<input type="button" value="前进" οnclick="toNext();"/>
		<input type="button" value="后退" οnclick="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="后退" οnclick="toBack();"/>
	</body>
</html>

在这里插入图片描述

2 .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>

在这里插入图片描述

3. JavaScript 计时事件

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

  • 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" οnclick="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>

在这里插入图片描述

  • 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()" οnclick="testsetInterval();"/>
		<input type="button" value="停止setInterval()" οnclick="testclearInterval();"/>
	</body>
</html>

在这里插入图片描述

  • 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="测试setTimeout()" οnclick="testsetTimeout();"/>
		<input type="button" value="停止setInterval()" οnclick="testclearInterval();"/>
	</body>
</html>
  • clearTimeout(timeoutVariable) 方法用于停止执行setTimeout()方法的函数代码。
    参数timeoutVariable----setTimeout方法的返回值。
<!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);
			}
			//停止setInterval
			function  testclearTimeout(){
				clearTimeout(mytestsetTimeout);
			}
		</script>
	</head>
	<body>
		<h1 id="test1"></h1>
		<input type="button" value="测试setTimeout()" οnclick="testsetTimeout();"/>
		<input type="button" value="停止setTimeout()" οnclick="testclearTimeout();"/>
	</body>
</html>

在这里插入图片描述

Brryant_24
关注
专栏目录
JavaScript中的BOM
小王的博客
07-17 516
BOM简介 window对象的常见事件 定时器函数 JavaScript执行机制 location对象 nevigator对象与history对象
Javascript学习之BOM介绍
weixin_54671516的博客
08-25 517
BOM的介绍，构成以及window对象的作用域和属性
js分享插件功能文档说明（微信、微博、qq空间分享）
ccmedu的博客
10-20 8689
1、插件 在需要分享的页面中引入下面的插件 <!-- 分享插件--> <scriptsrc="http://www.calledt.com/sosh/javascripts/sosh.min.js"> </script> <divstyle="float:right; margin-top:10px;"> <divc...
JavaScript_BOM
jakelihua
11-29 205
BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。下图是 BOM 中的各个对象和浏览器的各个组成部分的对应关系。
JavaScript_BOM简介
Maxim的博客
05-04 383
JS_BOM简介 1、什么是BOM 浏览器对象模型 BOM可以使我们通过JS来操作浏览器 2、BOM对象 Window - 代表整个浏览器的窗口 同时window也是网页中全局对象 Navigator - 网景前身 代表当前浏览器的信息 通过对象可以来识别不同的浏览器 由于历史原因 navigator对象中的属性已经不能帮助我们获取正确属性了 一半我们只会使用userAgent来判断浏览器信息 1、 获取浏览器信息 console.log(window.navigator.userAgent)
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
Javascript 什么是BOM
2201_75883077的博客
12-31 1403
核心说明window 对象表示浏览器窗口。它是 BOM 的核心对象，提供了浏览器窗口的各种方法和属性。location 对象表示当前文档的 URL 信息。它提供了访问和操作浏览器地址栏的方法和属性。navigator 对象对象：提供了浏览器的相关信息，如浏览器的名称、版本等。screen 对象提供了关于用户屏幕的信息，如屏幕尺寸、颜色深度等。history 对象表示浏览器的浏览历史记录，可以通过它来前进或后退到不同的页面。document对象。
JavaScript BOM 对象详解
xycxycooo的博客
07-16 690
在 JavaScript 编程中，BOM（Browser Object Model）是指浏览器对象模型，它提供了一组用于与浏览器窗口进行交互的对象。BOM 对象允许开发者控制浏览器的行为和获取浏览器的信息。本文将详细介绍 JavaScript 中的 BOM 对象，并通过丰富的示例帮助你更好地理解。通过本文的详细讲解，相信你已经对 JavaScript 中的 BOM 对象有了全面的了解。在实际编程中，合理使用 BOM 对象可以提高代码的效率和可读性。对象是 BOM 的核心对象，代表浏览器窗口或标签页。
Javascript之理解BOM和DOM
pakerder的博客
10-13 1048
一个完整的JavaScript实现应该由以下三个部分构成：ECMAScript、DOM、BOM. ECMAScript: ES规定了JS的变成语法和基础核心知识，是所有浏览器厂商都遵守的JS语法工业标准。 DOM: 文档对象模型（Document Object Model），让我们通过DOM提供的接口来操作网页。DOM中，文档表示的就是整个HTML网页文档；对象表示将网页每个部分转换为一个对象；模型为使用模型表示对象间的关系，方便我们获取对象。通过dom，可以访问、
javascript中的DOM和BOM
lh11223326的博客
05-05 1432
在JavaScript中，对象是一种复杂的数据类型，允许我们存储一组值（属性）以及方法。对象可以看作是一种数据的集合，其中包含键值对，其中键是字符串或符号，而值可以是任何数据类型，包括其他对象。或者说对象是一些属性的无序集合，其中每一个属性都对应一个名称和值(键/值对)。如数组是一堆值的集合，其中的每一个值都有一个数字的索引(从0到n-1)，对象也类似与数组，不同的是其中的索引是我们自己定义的(名称)，如：city(城市)，scale(规模).....等等。
JavaScript_2_DOM和BOM1
08-04
JavaScript DOM 和 BOM JavaScript 的 DOM（Document Object Model）和 BOM（Browser Object Model）是两种不同的对象模型，它们都是 JavaScript 语言的核心组件。DOM 是一种编程接口，用于访问和操作 HTML 文档中...
_javascript_BOM&DOM&JSON
08-01
javascript BOM 和 DOM 和 JSON
JavaScript_BOM.txt
10-19
### JavaScript 浏览器对象模型 (BOM) #### 一、概述 浏览器对象模型（Browser Object Model，简称 BOM）是 JavaScript 中一个重要的概念，它提供了与浏览器窗口交互的方法和属性。通过 BOM，开发者可以控制浏览器...
javascript必修课_bom
06-21
本课将带你学习前端开发中最重要的技术JavaScript,它是网页与用户进行交互的基石。我们将从最简单的点击事件、表单提交、元素改变颜色开始，一步步由浅及深学习JS的各种酷炫知识。最后我们还会学习Jquery框架，以...
深入学习JavaScript中的bom
10-16
在JavaScript中，BOM（Browser Object Model）即浏览器对象模型，它提供了一组用于与浏览器窗口交互的对象和方法。BOM的核心是`window`对象，它是所有全局变量和函数的容器，也是BOM的主要入口点。下面我们将深入...
考研复习-英语二真题考试题集-带答案
09-14
英语二考研真题复习资料，带答案版
2024中美独角兽公司发展分析报告.pdf
09-14
全球各大洲独角兽企业分布、中美独角兽企业对比（数量、估值、新增及退榜情况、行业分布、所在城市）、
C++ 中的异步编程模型是什么
09-14
在C++中，异步编程模型是处理并发任务、提高程序性能和响应性的关键技术。以下是C++中实现异步编程的几种主要方式： 每种异步编程模型都有其适用场景和优缺点。选择合适的模型可以提高代码的可读性、可维护性和性能。随着C++标准的不断发展，异步编程模型也在不断进化，为开发者提供了更多的工具和选择。 在实际开发中，应根据具体需求选择合适的异步编程模型。例如，对于简单的异步任务，回调函数可能是最直接的选择；而对于需要结构化错误处理和结果获取的复杂异步任务，std::async和std::future可能更合适；在需要高效资源管理的场景下，线程池是一个不错的选择；而对于需要编写大量异步代码的现代应用程序，协程提供了一种更简洁、更直观的解决方案。 总之，C++中的异步编程模型是多核和高并发环境下提高程序性能的重要工具。通过合理使用这些模型，开发者可以构建出更高效、更可靠的软件系统。
正则表达式Regex是一种文本模式.docx
最新发布
09-14
正则表达式（Regular Expression，简称Regex或Regexp）是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"）。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。正则表达式是强大的文本处理工具，广泛用于搜索、编辑或操作文本和数据。 基本组成 普通字符：大多数字符，包括所有大写和小写字母、所有数字、所有标点符号和一些其他符号，都是普通字符。正则表达式中的普通字符表示它们自身。例如，正则表达式test会匹配字符串"test"。 特殊字符（元字符）：一些字符在正则表达式中具有特殊的意义，如^、$、.、*、+、?、{、}、[、]、|、\等。这些特殊字符用于表示在搜索文本时要匹配的一个或多个字符。例如，.匹配除换行符之外的任何单个字符。 字符类：字符类允许你指定一组字符中的任何一个字符。例如，[abc]匹配"a"、"b"或"c"中的任意一个字符。你也可以使用范围，如[a-z]匹配任何小写字母。 预定义字符类：正则表达式提供了一些预定义字符类，用于匹配常见的字符集合。例如，\d匹配任何数字（等价于[0-9]），\s匹配任
深入理解JavaScript BOM：浏览器对象模型的实践与问题
本文档主要介绍了JavaScript BOM (Browser Object Model)的学习总结，BOM是浏览器对象模型，它赋予JavaScript在浏览器环境中操作的能力。由于BOM缺乏统一标准，各浏览器对其支持存在差异，这往往是开发者遇到问题的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值