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

随机推荐

Jackson中的那些坑
不符合驼峰规范的变量 “驼峰命名法”请自行百度.简单的来说就是变量的第一个单词以小写字母开始其他单词首字母大写,或者全部单词首字母都大写,分别称为“小驼峰”和“大驼峰” 比如一个符合驼峰规范命名的实体 ...
coco2dx 精灵类
CCSize size = CCDirector::sharedDirector()->getWinSize(); CCSprite *bg = CCSprite::create("H ...
C语言字节对齐 __align(),__attribute((aligned (n))),#pragma pack(n)
转载地址 : http://blog.csdn.net/21aspnet/article/details/6729724 一.概念对齐跟数据在内存中的位置有关.如果一个变量的内存地址正好位于它 ...
Unity3D跨平台时partial分部方法的使用
最近看到项目中插件的一部分逻辑,发现问题多多,可读性很差,并且容易出错,于是随手整理了下逻辑.Unity3D的插件逻辑,因为要考虑到针对各平台的移植,因此会大片的出现#if/#endif等条件编译, ...
MVC中一般为什么用IQueryable而不是用IList
IList(IList<T>)会立即在内存里创建持久数据,这就没有实现“延期执行(deferred execution)”,如果被加载的实体有关联实体(associations),此关联实 ...
[AngularJS] Extract predicate methods into filters for ng-if and ng-show
Leaking logic in controllers is not an option, filters are a way to refactor your code and are compa ...
2440test 裸机測试调试不进main 设置改动方法
2440test没进main函数并非跑飞.bin文件已经烧写到开发板里了的而是没选择载入文件,导致不能调试程序文件主要设置例如以下:
Qss All
/* * OOMidi application style sheet */QFrame#transportToolButtons{border: 0;spacing: 0;margin: 0;pad ...
错误ERROR datanode.DataNode (DataXceiver.java：run(278)) - hadoop07：50010DataXceiver error processing unknown operation src：127.0.0.136479 dst：127.0.0.150010
原因: Ambari 每分钟会向datanode发送"ping"连接一下去确保datanode是正常工作的.否则它会触发alert.但是datanode并没有处理空内容的逻辑,所以 ...
EF 命令
我们选VS中工具-库程序包管理器-程序包管理器控制台, 这时在VS底部会出现控制台这时候我们要执行四个操作: 下载安装EF 到工程.PM> Install-Package EntityFram ...

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

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

随机推荐

热门专题