您的位置：首页 > Web前端 > JavaScript

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

2014-03-20 15:39 393 查看


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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航