JavaScript-4.1-BOM 与 DOM-window 对象

最新推荐文章于 2022-12-23 21:17:23 发布

anh_qwh

最新推荐文章于 2022-12-23 21:17:23 发布

阅读量388

点赞数

分类专栏： WEB前端 JavaScript 文章标签： JavaScript open() setTimeout() setInterval

本文链接：https://blog.csdn.net/QWH_PYTHON/article/details/102724718

版权

WEB前端同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

JavaScript

27 篇文章 0 订阅

订阅专栏

JavaScript-4.1-BOM 与 DOM-window 对象

window 对象

window 对象

浏览器对象模型（Browser Object Model,BOM）使 JavaScript 有能力与浏览器“对话”
浏览器几乎实现了 JavaScript 交互性方面的相同办法和属性，常被认为 BOM 的方法和属性
BOM 由多个对象组成
- 代表浏览器窗口的 window 对象是 BOM 的顶层对象
- 其他对象都是该对象的子对象

一：window 对象属性

所有浏览器都支持 window 对象
window 对象表示浏览器窗口
所有 JavaScript 全局对象、函数、变量均自动成为 window 对象的成员
全局变量是 window 对象的属性
全局函数是 window 对象的方法

属性	含义
screen	有关客户端的屏幕和显示性能的信息
history	有关客户访问过的 URL 的信息
location	有关当前 URL 的信息
navigator	包含有关浏览器的信息
document	窗口中显示的文档对象
frames	返回窗口中所有命名的框架

二：window 对象的常用方法

window 对象中的所有方法均可以省略前面的 window

1、window 弹窗的输入输出

prompt()：弹窗接收用户输入
alert()：弹窗警告
confirm()：带有确认或取消按钮的提示框

2、open() 与 close()

(1) open()

重新打开一个窗口
主要传入三个参数：URL 地址、窗口名称、窗口特征

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>open()</title>
</head>
<body>
	<button onclick="openWindow()">打开一个新的浏览器窗口</button>
</body>

<script type="text/javascript">
	function openWindow(){
		// 点击按钮将会打开一个新的浏览器窗口，距离屏幕左边500px，屏幕顶部250px
		window.open("http://www.4399.com","国内大型游戏","height=70px,width=60px,top=250px,left=500px");
	}
</script>

</html>

效果动态图
在这里插入图片描述

(2) close()

关闭浏览器的当前选项卡

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>close()</title>
</head>
<body>
	<button onclick="closeWindow()">关闭浏览器</button>
</body>

<script type="text/javascript">
	function closeWindow(){
		window.close();
	}
</script>

</html>

效果动态图
在这里插入图片描述

3、setTimeout() 与 clearTimeout()

setTimeout()：设置延迟执行（以 ms 为单位计时），只会执行一次
clearTimeout()：清楚延时
传入参数：调用 setTimeout 时返回一个 id，通过变量接收 id，传入 clearTimeout

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>延时</title>
</head>
<body>
</body>

<script type="text/javascript">
	// 设置延时执行
	// 将延时器方法赋值给变量 timeOutId
	var timeOutId = setTimeout(function(){
		console.log('jack');
	},2000); // 延时2s后控制台打印

	// 使用延时器清除延时
	setTimeout(function(){
		// 在 clearTimeout 方法里面传入变量 timeOutId
		clearTimeout(timeOutId);
	},3000); // 3s后清除延时器
</script>

</html>

效果动态图
在这里插入图片描述

4、setInterval() 与 clearInterval()

两个参数：需要执行的function/毫秒
setInterval()：设置定时器，循环每个 N 毫秒执行一次
clearInterval()：清除定时器
传入参数：调用 setIntrerval 时返回一个 id，通过变量接收 id，传入 clearInterval

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定时器</title>
</head>
<body>
</body>

<script type="text/javascript">
	// 设置定时器
	// 将定时器方法赋值给变量 interValId
	var interValId = setInterval(function(){
		console.log('I like JavaScript.');
	},1000);

	// 5s后清除定时器
	setTimeout(function(){
		// 将声明 Interval 返回的id，传入 clearInterval
		clearInterval(interValId);
	},5000);
</script>

</html>