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([{}, {}, {}]); 一次批量插入 ...

随机推荐

poj 2503 字符串hash
题目链接:http://poj.org/problem?id=2503 代码: #include<cstdio> #include<cstring> #include<i ...
CMDB处理数据流程
客户端代码执行流程: 服务器端接收并处理数据流程:
jQuery的文档操作方法
jQuery 文档操作方法这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...
第一次尝试使用JAVA编写的ATM机程序
package study; import java.util.Scanner; public class ATM { private static int[] users = { 111111, 2 ...
python 基础干货 01
赋值的实现 a = 'abc' 1. 在内存中创建了'abc'字符串; 2. 在内存中创建了一个名为 a 的变量, 并把它指向刚才创建的'abc', 也就是a中保存着字符串的地址. b = a, 创建 ...
tar打包和解压命令
如果你有一个大文件想下载下来但是又太大可以压缩一下然后打包 #压缩 tar -czvf ***.tar.gz tar -cjvf ***.tar.bz2 #解压缩 tar -xzvf ***. ...
SQL 中having 和where的区别分析
在select语句中可以使用groupby子句将行划分成较小的组,然后,使用聚组函数返回每一个组的汇总信息,另外,可以使用having子句限制返回的结果集在select语句中可以使用groupby子 ...
ctrl+z的JAVA实现，借助了命令模式（command pattern）
前些天学习<<JAVA与模式>>,到命令模式时,随带给了一个CTRL+Z案例的实现,想来学习编程这么久,CTRL+Z还没有认真实现过. 因此,借助JAVA与模式里面的源代码,自 ...
[Oracle] - 性能优化工具（1） - AWR
AWR快照默认情况下,Oracle每隔一小时会自己主动产生一个快照,保存近期8天的快照. 我们能够通过例如以下语句获得产生快照的时间间隔和保存的天数: SYS@orcl(lx15)> sele ...
SQL Server与Oracle对比学习:权限管理(一)
http://blog.csdn.net/weiwenhp/article/details/8093661 我们发现我们现在的生活中到处是涉及到密码,你要记各种各样的密码.比如银行卡,邮件,QQ,微博 ...

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

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

随机推荐

热门专题