JavaScript-window下的对象

最新推荐文章于 2022-06-28 22:29:36 发布

代码浪人

最新推荐文章于 2022-06-28 22:29:36 发布

阅读量186

点赞数

分类专栏： java-web 文章标签： javascript js

版权归博客所有，仅供学习！

本文链接：https://blog.csdn.net/huiguo_/article/details/109168882

版权

java-web 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

文章目录

BOM的全称是浏览器对象模型。

BOM的全称是浏览器对象模型。

1.BOM有以下特点

    BOM是browser object model的缩写，简称浏览器对象模型

    BOM提供了独立于内容而与浏览器窗口进行交互的对象

    由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window

    BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性

    BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织W3C

    BOM最初是Netscape浏览器标准的一部分

在这里插入图片描述
每当我们打开一个网页，都会弹出一个窗口，这个浏览器窗口就是window对象呈现的一种形态。window对象是JavaScript层级中的顶层对象。

如果文档包含框架（或标签），浏览器会为 HTML 文档自动创建一个 window 对象，并为每个框架创建一个额外的 window 对象。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

在这里插入图片描述

2.Navigator对象就是返回一些浏览器的信息的。

在这里插入图片描述

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>试一下</title>
		<script type="text/javascript">
			window.onload = function() 
            {txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; 
             txt += "<p>Browser Name: " + navigator.appName + "</p>"; 
             txt += "<p>Browser Version: " + navigator.appVersion + "</p>"; 
             txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>"; 
             txt += "<p>Platform: " + navigator.platform + "</p>"; 
             txt += "<p>User-agent header: " + navigator.userAgent + "</p>";
             txt += "<p>User-agent language: " + navigator.systemLanguage + "</p>"; 
             document.getElementById("example").innerHTML = txt;
			
			};
		</script>
	</head>
	<body>
		<div id="example"></div>
	</body>
</html>

3.Screen就是客户端的显示屏幕的信息

在这里插入图片描述

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>试一下</title>
	</head>
	<body>
		<script type="text/javascript">
		document.write("可用宽度：" + screen.availWidth);
          document.write("可用高度：" + screen.availHeight);
		</script>
	</body>
</html>

4.History返回浏览器浏览过的网页

在这里插入图片描述

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>试一下</title>
		<script type="text/javascript">
			function goForward() {
				window.history.forward();
			}
		</script>
	</head>
	<body>
		这是第一页！
		<a href="indexs.html">链接方式前往下一页</a>
		<input type="button" value="history.forward方法前往下一页" onclick="goForward()" />
	</body>
</html>

5.Location对象包含有关当前URL的信息。

在这里插入图片描述

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>试一下</title>
		<script>
			document.write("当前网址为：" + location.href);
		</script>
	</head>
	<body>

	</body>
</html>

6.窗口控制

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>各种弹窗</title>
		<script type="text/javascript">
			function _alert() {
				alert("这是alert方法，用于弹出一个窗口");
			}

			function _prompt() {
				var Info = window.prompt('这是prompt方法，可以获取输入内容', '默认内容');
				alert("你输入了：" + Info);
			}

			function _confirm() {
				var flag = confirm("这是confirm方法，用于选择确认或取消");
				if (flag == true) {
					alert("你选择了确认");
				} else {
					alert("你选择了取消");
				}
			}

		</script>
	</head>
	<body>
	<input type="button"value="alert方法"onclick="_alert()"/>
	<br />
  <br />
	<input type="button"value="prompt方法"onclick="_prompt()"/>
	<br />
  <br />
	<input type="button"value="confirm方法"onclick="_confirm()"/>
	</body>
</html>

7.定时器

这就用到了window对象方法中的时间等待与间隔函数setTimeout,setInterval。

1）window.setTimeout(“function”,time)；//设置一个超时对象，time时间后只执行一次

2）window.setInterval(“function”,time)；//设置一个超时对象，每隔time时间后执行一次

3.清除定时

与setTimeout和setInterval对应的是clearTimeout方法与clearInterval方法，分别用于清除已绑定的setTimeout,setInterval的方法。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>setTimeout与setInterval</title>
		<script type="text/javascript">
			var stoNum = 1;
			var sitNum = 1;
			function myclick() {
				mytimer = window.setTimeout("alert('这就是setTimeout方法')", 2000);
			}

			function cto() {
				window.clearTimeout(mytimer);
			}

			function sitAdd() {
				document.getElementById("num2").value = sitNum;
				sitNum++;
			}

			function sit() {
				sitTime = window.setInterval("sitAdd()", 1000);
			}

			function cit() {
				window.clearInterval(sitTime);
			}
		</script>
	</head>
	<body>
		<p>
			setTimeout方法，可以在指定时间后执行某个动作
		</p>
		<input type="button"value="两秒后弹出窗口"onclick="myclick()"/>
		<p>
			clearTimeout方法，可以清除已经设置的setTimeout方法
		</p>
		<input type="button"value="清除两秒后弹出窗口（先点击弹出窗口，再点击清除，则不会弹窗了）"onclick="cto()"/>
		<p>
			setInterval方法，可以在指定时间后循环执行某个动作
		</p>
		<input type="button"value="数字每秒循环加1"onclick="sit()"/>
		<input type="text"id="num2"size="20"value="0"/>
		<p>
			clearInterval方法，可以清除已经设置的setInterval方法
		</p>
		<input type="button"value="清除数字每秒加1"onclick="cit()"/>
	</body>
</html>

代码浪人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript-window下的对象

文章目录BOM的全称是浏览器对象模型。1.BOM有以下特点2.Navigator对象就是返回一些浏览器的信息的。3.Screen就是客户端的显示屏幕的信息4.History返回浏览器浏览过的网页5.Location对象包含有关当前URL的信息。6.窗口控制7.定时器1）window.setTimeout("function",time)；//设置一个超时对象，time时间后只执行一次2）window.setInterval("function",time)；//设置一个超时对象，每隔time时间后执行一次3
复制链接

扫一扫