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

随机推荐

openstack kvm 虚拟机磁盘差异衍生
1, openstack虚拟实例备份之--多镜像格式多镜像文件合并为一个镜像文件衍生-差异镜像文件 /var/lib/nova/instances/b0abc22f-1a73-4079-b1bc ...
hadoop的安装
1. 获取linux操作系统可以申请云主机. 2. 安装JDK,配置环境变量 sudo apt-get install openjdk-7-jdk vim /etc/profile 在配置文件中配置 ...
nyoj 1185 最大最小值【线段树最大值最小值维护】
最大最小值时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述给出N个整数,执行M次询问. 对于每次询问,首先输入三个整数C.L.R: 如果C等于1,输出第L个数到第R ...
[T-SQL]从变量与数据类型说起
1.变量学习计算机语言,难免不碰到这个名词,不过咱这里说的是MSSQL(微软SQL Server产品)里的数据库语言实现. 稍微对程序比较严谨的语言都要求使用之前都要声明变量先,比如c.c++,j ...
C++ thread函数使用
#include <thread> #include <iostream> using namespace std; int shared_value = 0; void ch ...
几个shell自动化脚本(定期清理、磁盘空间、搜寻关键字)
发布时间:2014-10-28 09:52:17 编辑:AHLinux.com 分享几个精致耐用的shell脚本,分别用于定期清理暂存文件.检查硬盘空间使用率.搜寻所有记录文件的关键字符串.有需要 ...
WebService基于SoapHeader实现安全认证（一）
本文转载:http://www.cnblogs.com/houleixx/archive/2009/08/22/webservice-soapheader-security.html WebServi ...
Linux 性能优化之 IO 子系统系列图
http://blog.sina.com.cn/s/articlelist_1029388674_11_1.html Linux 性能优化之 IO 子系统(一) 本文介绍了对 Linux IO 子系统 ...
MySQLdb安装和使用2
http://blog.chinaunix.net/uid-8487640-id-3183185.html MySQLdb是Python连接MySQL的模块,下面介绍一下源码方式安装MySQLdb: ...
python学习笔记--Django入门三 Django 与数据库的交互：数据建模
把数据存取逻辑.业务逻辑和表现逻辑组合在一起的概念有时被称为软件架构的 Model-View-Controller (MVC)模式.在这个模式中, Model 代表数据存取层,View 代表的是系统中 ...

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

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

随机推荐

热门专题