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.载入新的文档

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

<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秒后跳转到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>

5.window - navigator对象　　

1､我们需要知道当前的浏览器厂商和版本信息可以用navigator对象。它有几个常用的属性。
appName:浏览器的全称。
appVersion:浏览器的版本。
userAgent:通常包含ＨＴＴＰ头部中发送的字符串，也可能包含其他细节。

2､也可以用非标准化的属性。

onLine:表示浏览器当前是否连接网络。
gelocation:用于确定用户地理位置信息,html5的属性
javaEnabled()：当浏览器运行java小程序时返回true。
cookieEnable:当浏览器可以保存cookie时返回true。

<html>

  <head>

    <script>

      function show(){

        var info = "";

        info += " appName:"+window.navigator.appName+"\n";

        info += " appVersion:"+window.navigator.appVersion+"\n";

        info += " userAgent:"+window.navigator.userAgent+"\n";

        var ele = document.getElementById("nav");

        ele.innerHTML = info;

      }

    </script>

  </head>

  <body onload="show();">

    <div id="nav"></div>

  </body>

</html>

<html>

  <head>

    <script>

       var info = "";

      function showNavigator(){

        info += " online:"+window.navigator.onLine+"\n";

        info += " javaEnabled:"+window.navigator.javaEnabled()+"\n";

        info += " cookieEnable:"+window.navigator.cookieEnabled+"\n";

        var ele = document.getElementById("nav");

        ele.innerHTML = info;

      }

    </script>

  </head>

  <body onload="showNavigator();">

    <div id="nav"></div>

    <div id="pos"></div>

  </body>

</html>

js学习--DOM操作详解大全二（window对象）的更多相关文章

js学习--DOM操作详解大全一（浏览器对象）
一.客户端中的window对象 window对象表示当前浏览器的窗口,它是一个顶级对象,我们创建的所有对象.函数.变量都是window对象的成员. window对象自带了一些非常有用的方法.属性. w ...
js学习--DOM操作详解大全前奏（认识DOM）
一 . 节点属性 DOM 是树型结构,相应的,可以通过一些节点属性来遍历节点树: 方法说明 nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text.nodeNa ...
jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类核心-DOM: DOM Co ...
JavaScript 的DOM操作详解
内容概要 DOM之查找标签基本查找间接查找节点操作获取值操作 class操作样式操作事件内置参数this 事件练习内容详细 DOM操作 DOM(Document Object Mode ...
javascript dom 操作详解 js加强
js加强操作实现代码. 1 .文档里的每个节点都有属性 nodeName . nodeValue . nodeType nodeName 文本节点的的节点名是 #text , nodeName 是只读 ...
JavaScript基础：DOM操作详解
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...
Jqurey DOM 操作详解
一.获取 1.获取内容----.text() .html() .value() text() - 设置或返回所选元素的文本内容格式:$(选择器) ...
mongodb学习04 操作详解(2)
查找文档筛选查找 db.collection.find(); 返回一个集合中文档的子集,子集的范围从 0 个文档到整个集合; db.collection.findOne(); 返回筛选的一个文档; ...
mongodb学习03 操作详解
插入文档 db.test.insert({"name":"jinks"}); 批量插入 db.test.insert([{}, {}, {}]); 一次批量插入 ...

随机推荐

问题-[WIN764位系统]操作UDL驱动不全处理
http://www-01.ibm.com/support/docview.wss?uid=swg21503768 方法# 1 单击“开始——运行” 输入一个命令类似如下: C:\Win ...
Testing和Instrumentation(转)
Android提供了一系列强大的测试工具,它针对Android的环境,扩展了业内标准的JUnit测试框架.尽管你可以使用JUnit测试Android工程,但Android工具允许你为应用程序的各个方面 ...
手机终于能连接android studio
折腾了三天,终于能连上了,网上各种方法都试了,就是不行,结果安装了腾迅安全管家,自动安装了手机驱动就好了,原来一直都是驱动惹的祸啊......
JAVA基础英语单词表（上）
action / 'ækʃən / 动作,行为 active / 'ækti ...
PTA 07-图5 Saving James Bond - Hard Version (30分)
07-图5 Saving James Bond - Hard Version (30分) This time let us consider the situation in the movie ...
用Android++在Visual Studio中用C/C++开发Android应用
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用Android++在Visual Studio中用C/C++开发Android应用.
thymelef 布局 fragment
需求:布局页面, 把首页分成四个页面: header footer ,content ,aside ,从githua 下载的原型, 所有内容是在一起的,这里拆分, 重用, 减少代码量做法: 新建页 ...
richTextBoxBulletClass
设置和获取选中的样式为 1. 2. 3. #region 数字序列 1. 2. 3. 4. 5. ... private bool bOrder = false; public bool Select ...
springMVC3学习(八)--全球异常处理
在springMVC在配置文件: <bean id="exceptionResolver" class="org.springframework.web.servl ...
HDU 1576 A/B 扩展欧几里德算法
A/B Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

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

js学习--DOM操作详解大全二（window对象）的更多相关文章

随机推荐

热门专题