js学习--DOM操作详解大全二（window对象）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js学习--DOM操作详解大全二（window对象）相关的知识，希望对你有一定的参考价值。

一.window - 计时器

 

1?setTimeout()可以用来在指定的时间之后单次调用函数。
setTimeount(f,1000);//一秒后调用函数f
clearTimeout();取消函数的执行   

示例：用setTimeout函数在1秒后改变字体的大小为60px。

<html>
  <head>
    <script>
      function invoke(f,start){
        setTimeout(f,start);
      }
      function changeSize(){
        //改变元素的class
        var e = document.getElementById("h1");
        e.className= ‘bigSize‘;
      }
    </script>
    <style>
      .bigSize{
        font-size:60px;;
      }
      
    </style>
  </head>
  <body onload="invoke(changeSize,1000)">
    <h1 class="" id="h1">改变字体的大小</h1>
  </body>
</html>

　　

2、setInterval()可以用来指定的时间之后重复调用函数。
setInterval(f,1000);//每1秒调用函数f
clearInterval();取消函数的调用

示例：用setInterval函数重复的改变字体的大小，大小值是随机产生的。
<html>
  <head>
    <script>
      var h;
      function invoke(f,start){
        h = setInterval(f,start);
      }
      function stop(){
        clearInterval(h);
      }
      function changeColor(){
        //改变元素的class
        var e = document.getElementById("h1");
        if(e.className == "oldSize"){
          e.className= "newSize";
        }else{
          
       	 e.className= "oldSize";
        }
      }
    </script>
    <style>
      .oldSize{
						font-size:10px;
      }
      .newSize{
        font-size:Math.floor(Math.random() * ( 50 + 1));;
      }
      
    </style>
  </head>
  <body onload="invoke(changeColor,1000)">
    <h1 class="" id="h1">改变字体的大小</h1>
    <input type="button" value="结束" onclick="stop()"/>
  </body>
</html>

　　二.location(定位)

1?window对象的location属性对象，表示该窗口中当前显示的文档URL，也可以载入新的文档。
  2?document对象的location与window对象的location是同一个。
  3?常用的属性：
  • location.href ：返回当前页面的 URL
  • location.hostname ：返回 web 主机的域名
  • location.pathname ：返回当前页面的路径和文件名
  • location.port 返回 web ：主机的端口
  • location.protocol ：返回所使用的 web 协议（http:// 或 https://）
  • html>
  <head>
    <script>
      function showLocation(){
        var content = "";
        content += " url:"+window.location.href;
        content += " hostname:"+window.location.hostname;
        content += " pathname:"+window.location.pathname;
        document.getElementById("content").innerHTML = content;
      }
    </script>
  </head>
  <body onload="showLocation();">
    <div id="content"></div>
  </body>
</html>

    　4.载入新的文档

    1. location对象的assign()方法可以载入你指定的URL文档。
    2. location对象的replace()方法跟assign()类似，但它会从浏览历史中把当前文档删除。
    3. location对象的reload()方法可重新载入当前的文档。
    4. 也可用location = url的方式使浏览器跳转到新页面。
    5. <html>
  <head>
    <script>

      function onAssign(){
        var objWindow = document.getElementById(‘frame1‘).contentWindow ;
         objWindow.location.assign(‘http://www.baidu.com‘);
        
      }
      function onReplace(){
        var objWindow = document.getElementById(‘frame1‘).contentWindow ;
        objWindow.location.replace(‘http://www.sina.com.cn‘);
      }
      function onReload(){
        var objWindow = document.getElementById(‘frame1‘).contentWindow ;
        objWindow.location.reload();
      }
      function onjump(){
        var objWindow = document.getElementById(‘frame1‘).contentWindow ;
        objWindow.location = "http://www.baidu.com";
      }
    </script>
  </head>
  <body>
    <input type="button" value="assign" onclick="onAssign()"/>
    <input type="button" value="replace" onclick="onReplace()"/>
    <input type="button" value="reload" onclick="onReload()"/>
    <input type="button" value="传统跳转" onclick="onjump()"/>
    <iframe name="frame1" id="frame1" src=""></iframe>
  </body>
</html>

      　5.小案例：在页面上显示倒数计时5秒后跳转到http://www.baidu.com页面。

      <html>
 <head>
  <title>浏览器对象</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>   
 </head>
 <body>
  <!--先编写好网页布局-->
   <p><span id="mytime" style="font-weight:bold;"></span>秒后回到主页<input type="button" value="返回" onclick="click()" /></p>
 
  <script type="text/javascript">  
 
   //获取显示秒数的元素，通过定时器来更改秒数。 
   var num=5;
    function time(){
        var mytime=document.getElementById("mytime");
        mytime.innerHTML = num;
        num = num - 1;
        setTimeout(time, 1000);
        if(num == 0)
          location.href = "http://www.baidu.com";
    }
    setTimeout(time);
    
   //通过window的location和history对象来控制网页的跳转。
   function click(){
      window.history.forward();
   }
 </script> 
</body>
</html>

      　　

    　

 

以上是关于js学习--DOM操作详解大全二（window对象）的主要内容，如果未能解决你的问题，请参考以下文章

大前端完整学习路线（详解）

JS最实用的dom节点操作大全

js学习总结：DOM节点二（dom基本操作）

Js操作-DOM操作

Js--DOM详解

js的dom学习笔记二