js_day21--js DOM编程（window对象2）
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>
2.
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="移动" onclick="test2()"/>
<input type="button" value="改变大小" onclick="test3()"/>
<input type="button" value="打开新窗口" onclick="test4()"/>
-->
<input type="button" value="打开新窗口" onclick="test5()"/>
<span id="mySpan">消息</span>
<input type = "text" id="info2" />
<input type = "button" value="通知子窗口" onclick="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()"/>
注意：有些浏览器可能由于安全考虑并不支持这样的通信。
5.
案例：实现登录验证，并且倒计时跳转
登录界面：
<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="登录" onclick="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>