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

来源：互联网发布：宫崎勤老鼠人草图知乎编辑：程序博客网时间：2024/05/01 11:59

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);//取消timeoutclearTimeout(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);//取消timeoutclearTimeout(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");//打开一个新的窗口}*/varnewWindow;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()"/>

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

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

登录界面：

<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>

0 0