学习笔记JS进阶语法一window对象

Posted 2022-03-10 SAP剑客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习笔记JS进阶语法一window对象相关的知识，希望对你有一定的参考价值。

内容整理自《从0到1javascript快速上手》下半部分-进阶语法篇

示例：打开/关闭新窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>打开窗口/关闭窗口</title>
		<script>
			window.onload = function ()
			 
				var btnOpen = document.getElementById("btn_open");
				var btnClose = document.getElementById("btn_close");
				var opener = null;
				
				btnOpen.onclick = function () 
					opener = window.open("https://www.baidu.com");
				;
				
				btnClose.onclick = function () 
					opener.close();
				;
			
		</script>
	</head>
	<body>
		<input id="btn_open" type="button" value="打开新窗口" />	
		<input id="btn_close" type="button" value="关闭新窗口" />	
	</body>
</html>

示例：重复性定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>event对象</title>
		<style type="text/css">
			divwidth: 100px;height: 100px;border: 1px;solid silver;
		</style>
		<script>
			window.onload = function ()
			 
				//获取元素
				var oBtn = document.getElementsByTagName("input");
				var oDiv = document.getElementsByTagName("div")[0];
				
				//定义数组，存放颜色
				var colors = ["red","orange","yellow","green","purple","blue"];
				//存放定时器
				var timer = null;
				//用于计数
				var i = 0;
				
				//按下"Start"按钮
				oBtn[0].onclick = function () 
					//每次点击开始按钮，一开始就清除一次定时器
					clearInterval(timer);
					//每间隔一秒钟切换一次颜色
					timer = setInterval(function () 
						oDiv.style.background = colors[i];
						i++;
						i = i % colors.length;
					,1000);
				;
				
				//按下"Stop"按钮
				oBtn[1].onclick = function () 
					clearInterval(timer);
				;
				
			
		</script>
	</head>
	
	<body>
		<input type="button" value="Start" />	
		<input type="button" value="Stop" />
		<div>看我72变！</div>
	</body>
</html>

以上是关于学习笔记JS进阶语法一window对象的主要内容，如果未能解决你的问题，请参考以下文章

学习笔记JS进阶语法一document对象