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

随机推荐

利用Dnspod api批量更新添加DNS解析【python脚本】 - 推酷
利用Dnspod api批量更新添加DNS解析[python脚本] - 推酷 undefined
YII 权限管理
CREATE TABLE IF NOT EXISTS `admin_role` ( `id` ) unsigned NOT NULL auto_increment, `name` ) NOT NULL ...
hdoj 1827 Summer Holiday【强连通分量&&缩点】
Summer Holiday Time Limit: 10000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
nyoj 483 Nightmare【bfs+优先队列】
Nightmare 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 Ignatius had a nightmare last night. He found him ...
struts2 表单处理
在这篇教程里我们将探究如何处理表单提交.本文例子介绍: javabean存储表单数据在action中重写validate方法进行简单的校验创建一个struts2表单并和javabean匹配 jav ...
shell 脚本执行日志通用模块
目标实现记录SHELL执行的開始时间,结束时间.执行状态,错误信息等,以函数封装日志记录的方式,脚本调用函数源代码通用函数脚本program_log_new.sh function init_l ...
在Windows下使用MinGW静态编译Assimp
使用MinGW静态编译Assimp 到了5月份了,没有写一篇日志,于是自己从知识库里面拿出一篇文章充数吧.这次将要解说怎样在Windows下使用MinGW静态编译Assimp. Assimp是眼下比較 ...
[Java Performance] 数据库性能最佳实践 - JPA和读写优化
数据库性能最佳实践当应用须要连接数据库时.那么应用的性能就可能收到数据库性能的影响. 比方当数据库的I/O能力存在限制,或者因缺失了索引而导致运行的SQL语句须要对整张表进行遍历.对于这些问题.只相 ...
android82 文件下载框架xUtils
package com.itheima.xutils; import java.io.File; import com.lidroid.xutils.HttpUtils; import com.lid ...
ctkPlugin插件系统实现项目插件式开发
插件式开发体会: 自开始写[大话QT]系列就开始接触渲染客户端的开发,说是开发不如更多的说是维护以及重构,在接手这块的东西之前自己还有点犹豫,因为之前我一直认为客户端嘛,没什么技术含量,总是想做比较有 ...

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

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

随机推荐

热门专题