首页 > 代码库 > JavaScript基础--DOM对象（十三）:（windows对象：history\location\navigator\screen\event）

JavaScript基础--DOM对象（十三）:（windows对象：history\location\navigator\screen\event）

2024-07-11 13:50:48   225人阅读

DOM编程
1、为什么要学习DOM
(1) 通过dom编程，我们可以写出各种网页游戏
（2）dom编程也是ajax的重要基础
2、DOM编程介绍
DOM = Document Object Model(文档对象模型)
DOM是HTML与XML的应用编程接口(API)

BOM和DOM相辅相成的关系
BOM为纲，DOM为目，DOM是BOM的具体体现

 

3、DOM对象
　　3.1 Windows对象

     3.1.1 confirm

　　　　function test(){　　　　var res= window.confirm("你要删除");　　　　if(res){　　　　　　window.alert("删除");　　　　}else{　　　　　　window.alert("放弃删除");　　　　　　 }　　　　}<input type="button" value="http://www.mamicode.com/删除" onclick="test()"/>

      

　　 3.1.2 setInterval();
该函数可以根据指定的时间，循环的执行某个函数，或者表达式需求，请 每隔1s弹出 
hello world

     function sayHello(){         window.alert("hello");    }      function showTime(){         //在元素间的文本就是通过对象.innerText         document.getElementById("mytime").innerText = new Date().toLocaleString();     }    setInterval("showTime()",1000);    <span id="mytime"></span>
    //需求 小人动态    var n=1;    //让静态图片动起来    function runChild(){      //得到myimg对象       var myimg = document.getElementById("myimg");        myimg.src = http://www.mamicode.com/((n++%8)+1)+".png";    }    setInterval("runChild",1000);    <img src="http://www.mamicode.com/1.png" id="myimg"/>    //扩展要求：小人走10步就停止。

　　3.1.3 clearInterval()

     var n=1;        var count=0;    //让静态图片动起来    function runChild(){      count++;      if(count==11){         clearInterval(myTimer);      }      //得到myimg对象       var myimg = document.getElementById("myimg");        myimg.src = http://www.mamicode.com/((n++%8)+1)+".png";    }    var myTimer=setInterval("runChild",1000);    <img src="http://www.mamicode.com/1.png" id="myimg"/>

　　3.1.4 setTimeout();

　　在指定的毫秒数后调用函数后表达式（但是只调用一次）
　　需求 再打开页面后，5秒后弹出 hello

　　setTimeout("sayHello()",5000);

var n=1;    var count=0;    //让静态图片动起来    function runChild(){      count++;      //小人走10步，停5秒      if(count==11){         clearInterval(myTimer);     setTimeout("reRun()",5000); //只调用一次小人走路的方法          count=0;      }      //得到myimg对象       var myimg = document.getElementById("myimg");        myimg.src = http://www.mamicode.com/((n++%8)+1)+".png";    }    var myTimer=setInterval("runChild()",1000);       function reRun(){        //重新设置调用小人走路的方法，1秒调用一次，同时count在计小人的走几步，走到第11步，就清除myTimer的对象。        myTimer=setInterval("runChild()",1000);    }    <img src="http://www.mamicode.com/1.png" id="myimg"/>

    3.1.5 clearTimeout()

 function test(){        window.alert("abc");    }    var mytimer=setTimerout("test()",3000);    //取消timeout    clearTimerout(mytimer);

 

　　

　　3.1.6 moveTo() moveBy()
　　案例：
　　window.moveTo(100,100); //相对屏幕的左上角移动
　　window.moveBy(50,50); //相对当前窗口的左上角移动

function test2(){    window.moveTo(100,100);     }          <body>     我是一个窗口     <input type="button" onclick="test2()" value="http://www.mamicode.com/移动"/>     </body>

　　3.1.7 resizeTo()resizeBy()

　　window.resizeTo(100,100); //把窗口调整到100,100
　　window.resizeBy(100,100); //把窗口再增加 100,100

     function test2(){    window.moveTo(200,200); //调整窗口大小     }          <body>     我是一个窗口     <input type="button" onclick="test2()" value="http://www.mamicode.com/改变大小"/>     </body>

　　3.1.8 开一个新窗口

     function test2(){        //window.open("newWindow.html","_self");//还在原来页面开一个新窗口，替换原页面窗口       //window.open("newWindow.html","_blank"); //重新打开一个新窗口        window.open("newWindow.html","_blank","channelmode=yes,resizable=no,titlebar=no,location=no");      }     <body>     我是一个窗口     <input type="button" onclick="test2()" value="http://www.mamicode.com/打开新窗口"/>     </body>

　　

　　3.1.9 opener
　　父窗口和子窗口通信

//演示子窗口发消息给父窗口 <script language="javascript" type="text/javascript">      var newWindow;      function test2(){         newWindow = window.open("newWindow.html","_blank");         //newWindow.document.info2.value ="http://www.mamicode.com/哈哈";      }      function $(id){         return document.getElementById(id);      }        </script> </head> <body>   我是一个窗口   <input type="button" value="http://www.mamicode.com/打开新窗口" onclick="test2();" />   <span id="myspan">消息</span></body>//newWindow.html  <script language="javascript" type="text/javascript">       function notify(){          var val = document.getElementById("info").value;          opener.document.getElementById("myspan").innerText =val;       }  </script> </head> <body>   我是子窗口   <input type="text" id="info"/><input type="button" value="http://www.mamicode.com/通知给父窗口" onclick="notify();"/> </body>

 

  //父窗口与子窗口相互通信         var newWindow;         function test2(){             //newWindow其实就是指向新窗口的引用              newWindow = window.open("newWindow.html","_blank");             //newWindow.document.info.value ="http://www.mamicode.com/哈哈";         }                   function test3(){              newWindow.document.getElementById("info").value = http://www.mamicode.com/$("info2").value;         }         function $(id){             return document.getElementById(id);         }     <body>     我是一个窗口     <input type="button" onclick="test2()" value="http://www.mamicode.com/打开新窗口"/>     <span id="myspan">消息</span>     <input type="text" id="info2"><input type="button" value="http://www.mamicode.com/通知给子窗口"  onclick="test3();"/>     </body>//newWindow.html    <script language="javascript">        function notify(){         var val=document.getElementById("info").value;     opener.document.getElementById("myspan").innerText=val;       }    </script>    我是新窗口    <input type="text" id="info"/> <input type="button" value="http://www.mamicode.com/通知给父窗口" onclick="nofity();"/>

 

      

　　3.1.10登陆页面，登陆成功后，5秒钟跳转到另一个页面

//login.html    <script language="javascript">        function checkuser(){            if($(‘uname‘).valuehttp://www.mamicode.com/=="shunping"&&$("pwd").valuehttp://www.mamicode.com/=="123"){                return true;            }else{                $(‘uname‘).value ="";                $("pwd").value="";                return false;            }        }        function $(id){            return document.getElementById(id);        }    </script>    <form action = "ok.html">    u:<input type="text" id="uname"/><br/>    p:<input type="password" id="pwd"/><br/>    <input type="submit" value="http://www.mamicode.com/登陆" onclick="return checkuser();"/>      //ok.html     <script language="javascript">          //setTimeout("javascript:window.open(‘manage.html‘)",5000);          function tiao(){             clearInterval(mytime);             window.open(‘manage.html‘,"_self");       }           setTimeout("tiao()",5000);                   function changeSec(){               //得到myspan的值              $("myspan").innerText =parseInt($("myspan").innerText)-1;           }       var mytime=setInterval("changeSec()",1000);          function $(id){            return document.getElementById(id);          }            </script>     登陆成功<span id="myspan">5</span>秒后自动跳转到管理页面     //manage.html     管理页面

 

     3.1.11在浏览器状态栏显示可以移动的文字

    var space_num = 0;    var dir =1;    function myScroll(){    var space_my="";        space_num = space_num + 1 * dir;        if(space_num > 50 || space_num <0){            dir = dir * -1;        }        for(var i=0;i<space_num;i++){            space_my = space_my + " ";        }        window.status =space_my + "世界你好！";     }             function startIt(){         setInterval("myScroll()",100);     }     <body onl oad="startIt()">

 

　　3.2 histroy对象

     作用： 该对象包含客户端访问过的URL信息     //histstroy.back() = histroy.go(-1);     代码：     a.html     <a href="http://www.mamicode.com/b.html">goto b</a>     b.html       <script language="javascript">           function back(){              window.alert(history.length);//每次点击一次“返回上级页面”，history.length 就会累加数字 1，除非关闭页面。              history.back();              history.go(-1); //等价于histroy.go(-1);           }       </script>     <a href="http://www.mamicode.com/#" onclick="back();">返回上级页面</a>

　　3.3 location对象

    <script language="javascript">         function test(){             location.reload();             window.alert(locaiton.href+""+location.hostname+""+location.port);             document.write(location.hostname); //获取网页地址中的主机名         }    </script>    <body>       <input type="button" value="http://www.mamicode.com/刷新页面" onclick="test()"/>aaaabbs    </body>

　　3.4 navigator对象    该对象包含当前浏览器的各信息     

   <script language="javascript">    
     function test(){
            document.write("<p>Name:");            document.write(navigator.appName + "</p>" +navigator.platform+"</p>"+navigator.systemLanguage);//navigator.systemLanguage 只有IE是可使用
        }
    </script>    <body>       <input type="button" value="http://www.mamicode.com/刷新页面" onclick="test()"/>aaaabbs    </body>

    3.5 screen对象

      <script language="javascript">           document.write(screen.height+" "+screen.width);           document.write(screen.availHeight);            </script>

　3.6 event对象

      3.6.1 直接和某个html控件绑定，比如：

     <script language="javascript">          function test(){                 //编写代码           }    </script>      <input type="button" value="http://www.mamicode.com/确定" id="" onclick="test()"/>

      3.6.2  通过getElementById() 获取到元素后，再绑定监听，如下：

       <script language="javascript">           function test(){              document.write("hello");           }         </script>      <body>         <input type="button" id="but1" value="http://www.mamicode.com/确定"/>         <script language="javascript">             document.getElementById("but1").onclick=test;         </script>      </body>

      3.6.3 如果我们有一个投票系统，但是只能投一次，就不让用了。

　

       <script language="javascript">           function test(){              document.write("你投了一次票");              //解除事件绑定,在IE内核的浏览器中使用             //document.getElementById("but1").detachEvent(‘onclick‘,test);                 document.getElementById("but1").removeEventListener("click",test,true);   //使用在除了IE内核的其他浏览器中           }          </script>      <body>         <input type="button" id="but1" value="http://www.mamicode.com/投票"/>         <script language="javascript">              //给一个按钮绑定事件             //document.getElementById("but1").attachEvent(‘onclick‘,test);             document.getElementById("but1").addEventListener("click",test,true);  //使用在除了IE内核的其他浏览器中         </script>      </body>

 

　　3.6.4 event.keyCode验证录入的是否为数字，如果不是数字，自动清空，不让录入。 

      <script language="javascript">           function test(event){           if(event.keyCode<48 || event.keyCode>57){                   window.alert("你输入的不是数");                   //window.event.returnValue=http://www.mamicode.com/false;>               }            }      </script>      <input type="text" onkeypress="return test(event)" id="text1"/>      <input type="button" onclick="test()" value="http://www.mamicode.com/提交"/>

 


联系
我们