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

随机推荐

Web 应用性能和压力测试工具 Gor - 运维生存时间
Web 应用性能和压力测试工具 Gor - 运维生存时间 undefined 无需花生壳,dnspod实现ddns - 推酷 undefined
linux安装apache软件的过程
参考官方安装指导:http://httpd.apache.org/docs/2.4/install.html 1.下载依赖包 apr/apr-util/pcre 2.解压依赖包 3.安装apr 进入安 ...
String与常量池
转自:http://blog.sina.com.cn/s/blog_69dcd5ed0101171h.html 1. 首先String不属于8种基本数据类型,String是一个对象.因为对象的默认值是 ...
Android项目svn代码管理问题[转]
用svn控制版本,svn本身是不会识别哪些该传,哪些不该传,这就导致有些关于路径的东西(比如拓展jar的路径)也被上传了,而当别人下载后,那个路径对于这个人可能完全不存在,项目编译就会出问题.用ecl ...
android 75 新闻列表页面
new.xml <?xml version="1.0" encoding="UTF-8" ?> <newslist> <news& ...
Choosing a Linux Tracer ------Brendan Gregg's Blog
home Choosing a Linux Tracer (2015) 08 Jul 2015 Linux Tracing is Magic! A tracer is an advanced perf ...
经典关于多态的demo
class Foo { public int a; public Foo() { a = 3; } public int addFive() { a += 5; return a; } public ...
DLL Export 报错
编译报错: error : syntax error at token xxxx 修改非Unicode 系统区域设计即可
Asp.net Mvc对比Php的4大误解
一:asp.net技术已过时,Php技术更新 Asp.net mvc 5 发布于2014 夏天. 二:php开发者更多,所以更能得到帮助 2者对比犹如下图,会拿电锯的肯定多少会点锯子, 会用锯子的不一 ...
SqlSugar-事务操作
一.事务操作实例特别说明: 1.特别说明:在事务中,默认情况下是使用锁的,也就是说在当前事务没有结束前,其他的任何查询都需要等待 2.ReadCommitted:在正在读取数据时保持共享锁,以避免脏 ...

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

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

随机推荐

热门专题