JavaScript的BOM

最新推荐文章于 2024-07-16 19:07:40 发布

冰凌寒梦

最新推荐文章于 2024-07-16 19:07:40 发布

阅读量71

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43153155/article/details/108420688

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JavaScript的BOM

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

浏览器对象模型 (BOM)😦Browser Object Model)尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

1.1 window

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

1.1.1 window尺寸

有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度(不包括滚动条、菜单栏、工具栏)
window.innerWidth - 浏览器窗口的内部宽度(不包括滚动条、菜单栏、工具栏)

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;

1.1.2 window方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口

1.1.3 Screen

可用宽度：screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

返回您的屏幕的可用宽度：

document.write("可用宽度: " + screen.availWidth);

以上代码输出为：

可用宽度: 1920

可用高度：screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

返回您的屏幕的可用高度：

document.write("可用高度: " + screen.availHeight);

以上代码将输出：

可用高度: 1040

1.1.4 Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

window.location 对象在编写时可不使用 window 这个前缀。一些例子：

一些实例:

location.href 属性返回当前页面的 URL。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

location.href 属性返回当前页面的 URL。

代码：

document.write(location.href);

以上代码输出为：

http://www.xxx.com/js/my.html

location.pathname 属性返回 URL 的路径名。

代码：

document.write(location.pathname);

以上代码输出为：

/js/my.html

location.assign() 方法加载新的文档。

加载一个新的文档：

<html>
<head>
<script>
function newDoc()
  {
  window.location.assign("http://www.baidu.com/")
  }
</script>
</head>
<body>

<input type="button" value="Load new document" onclick="newDoc()">

</body>
</html>

1.1.5 History

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

window.history 对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

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

<html>
<head>
<script>
function goBack()
  {
  window.history.back()
  }
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

history.forward() - 与在浏览器中点击按钮向前相同

<html>
<head>
<script>
function goForward()
  {
  window.history.forward()
  }
</script>
</head>
<body>

<input type="button" value="Forward" onclick="goForward()">

</body>
</html>

1.1.6 Navigator

window.navigator 对象在编写时可不使用 window 这个前缀。

<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

JavaScript计时

2.1 Date对象

var d=new Date();
document.write(d);
document.write("<br/>")
document.write("年份："+(d.getYear()+1900));
document.write("<br/>")
document.write("年份："+d.getFullYear());
document.write("<br/>");
document.write("月份:"+(d.getMonth()+1))
document.write("<br/>");
document.write("日期:"+d.getDate());
document.write("<br/>");
document.write("小时:"+d.getHours());
document.write("<br/>");
document.write("分钟:"+d.getMinutes());
document.write("<br/>");
document.write("秒:"+d.getSeconds());

2.2 JavaScript计时函数

setInterval() 周期执行函数

间隔指定的毫秒数不停地执行指定的代码：

每三秒弹出 “hello” ：

setInterval(function(){alert("Hello")},3000);

实例展示了如何使用 setInterval() 方法，但是每三秒弹出一次对用户体验并不好。

以下实例将显示当前时间。 setInterval() 方法设置每秒钟执行一次代码，就是手表一样。

var myVar=setInterval(function(){myTimer()},1000);

function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}

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

代码：

<p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>

<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction()
{
clearInterval(myVar);
}
</script>

setTimeout() 延迟执行函数

延迟执行指定的函数，只能执行一次。

window.setTimeout(“javascript 函数”,毫秒数);

第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 “alert(‘5 seconds!’)”，或者对函数的调用，诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示：1000 毫秒等于一秒。

等待3秒，然后弹出 “Hello”:

setTimeout(function(){alert("Hello")},3000);

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

var myVar;

function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}

function myStopFunction()
{
clearTimeout(myVar);
}

使用setTimeout实现周期执行

<script type="text/javascript">
			
			var num=0;
			var id=0;
			function show(){
				document.write(id+"好好学习<br/>");
				num++;
				if(num!=10){
					id=setTimeout(show,1000);
				}
			}
			
			id=setTimeout(show,1000);
			
		</script>

冰凌寒梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的BOM

JavaScript的BOM浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。浏览器对象模型 (BOM)????Browser Object Model)尚无正式标准。由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。1.1 window所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 wi
复制链接

扫一扫

专栏目录