js_day21--js DOM编程（window对象2）

本文链接：https://blog.csdn.net/gavin_john/article/details/21624161

Day21

Window对象

clearTimeout()取消由setTimeout()设定的定时器

<html>
	<head>
		<title>window.test</title>
		<script language="javascript" type="text/javascript">
		<!--
			function test(){
				window.alert("abc");
			}
		var myTimer = 	setTimeout("test()",3000);
		//取消timeout
		clearTimeout(myTimer);
			//>
		</script>	
	</head>	
	<body>
	
	</body>
</html>

moveTo()是相当于屏幕的左上角。

moveBy()是相当于当前窗口的左上角。

resizeTo()是把窗口调整到多少。

resizeBy()是相对于当前窗口增加多少。

3.打开新窗口

function test4(){
window.	open("day_21_2.html","_self");//self是替换原页面
			window.open("day_21_2.html","_blank","resizable=no,menubar=no,width=200,height=100,location=no");//打开一个新的窗口

4.opener返回对创建此窗口的窗口的引用

父窗口和子窗口通信

父窗口：

<html>
	<head>
		<title>window.test</title>
		<script language="javascript" type="text/javascript">
		<!--
		/*
			function test(){
				window.alert("abc");
			}
		var myTimer = 	setTimeout("test()",3000);
		//取消timeout
		clearTimeout(myTimer);
		*/
		
		/*
		function test2(){
			window.moveTo(100,100);	
			window.close();//关闭窗口
		}
		function test3(){
			window.resizeTo(100,100);	
		}
		function test4(){
			window.	open("day_21_2.html","_self");//self是替换原页面
			window.open("day_21_2.html","_blank","resizable=no,menubar=no,width=200,height=100,location=no");//打开一个新的窗口
			
		}
		*/
		var	newWindow;
		function test5(){
			//newWindow其实就是指向新窗口的引用
			newWindow = window.open("day_21_2.html","_blank");	
			
		}
		function test6(){
			newWindow.document.getElementById("info").value=$("info2");	
		}
		
		function $(id){
			return document.getElementById(id).value;	
		}
			//>
		</script>	
	</head>	
	<body>
		我是一个窗口
	<!--	<input type="button" value="移动" οnclick="test2()"/>
		<input type="button" value="改变大小" οnclick="test3()"/>
		<input type="button" value="打开新窗口" οnclick="test4()"/>
		-->
		<input type="button" value="打开新窗口" οnclick="test5()"/>
		<span id="mySpan">消息</span>
		<input type = "text" id="info2" />
		<input type = "button" value="通知子窗口" οnclick="test6()" />
		
	</body>
</html>

子窗口：

<script language = "javascript">
		function notify(){
			var val = document.getElementById("info").value;	
			window.alert(val);
			opener.document.getElementById("mySpan").innerText=val;
		}
</script>

我是新窗口
<input type="text"  id="info"/>
<input type = "button" value="通知给父窗口" id="info" onclick = "notify()"/>

注意：有些浏览器可能由于安全考虑并不支持这样的通信。

案例：实现登录验证，并且倒计时跳转

登录界面：

<html>
	<head>
		<title>
			登录	
		</title>
		<script language="javascript" type="text/javascript">
			function check(){
				if($("uname").value=="Gavin"&&$("pwd").value =="123"){
					//window.alert("OK");
					return true;	
				}	else{
					window.alert("用户名或密码错误");
					$("uname").value="";
					$("pwd").value="";
					return false;	
				}
			}
			
			function $(id){
				return document.getElementById(id);	
			}
			
		</script>	
	</head>	
	<body>
		<form action="Ok.html">
			Name:<input type ="text" id="uname"/></br>	
			Pass:<input type ="password" id="pwd"/></br>	
			   <input type="submit" value="登录" οnclick="return check();"/> 
												<input type="reset" value="重置"/>
			
		</form>	
	</body>
</html>

登录成功：

<html>
	<head>
		<title>
			登录	
		</title>
		<script language="javascript" type="text/javascript">
			var time=5;
			function jump(){
				var string = document.getElementById("mySpan");
				string.innerText = "登录成功,"+(time--)+"秒后自动跳转到管理页面！";
				if(time==-1){
					window.open("manage.html","_self");		
				}
			}
			window.setInterval("jump()",1000);
		</script>	
	</head>	
	<body>
		<span id="mySpan"></span>
	</body>
</html>