你的认同是对我最大的赞美。

JavaScript对象的常用属性及使用

什么是浏览器对象模型?

  浏览器对象模型(BOM Browser Object Model)是JavaScript的组成之一,它提供了独立于内容和浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互。

JavaScript中对象分为:

本地对象(native object)、内置对象(built-in object)、宿主对象(host object)。其中本地对象和宿主对象大家一般用的比较多。

使用BOM(浏览器对象模型)可以实现什么功能?

  (1)弹出新的浏览器窗口

  (2)移动、关闭浏览器窗口及调整窗口的大小。

  (3)在浏览器窗口中实现前进和后退方法。

一个浏览器可以看成是一个window对象,下面为大家一一介绍常用三大属性的介绍及使用

  1)document:提供当前页面的URL信息(比如:http://cn.bing.com/)并且可以重新加载当前页面货载入新页面。

    语法如下:

document.URL

  2)location:location常用属性是href,通过对此属性设置不同的网址,从而达到跳转功能。

      语法如下:

1 <!--首先定义一个函数-->
2 function myclick() {
3                 //定位到百度首页
4                 location.href = "http://www.baidu.com";
5             }

  3)history:可以实现前进后退及刷新功能

1 history.go(0)    //刷新当前页面
2 history().go(-1)    //后退一页
3 history().go(1)    //前进一页

 

下面重点来了,定时函数

定时函数对我们以后的开发web工程师非常有用处的,下面介绍一下定时函数的常用方法及使用:

  定时函数的常用方法:

    1)setTimeout():用于在指定的毫秒后调用函数或者计算表达式;

      语法:

      setTimeout("函数名称",毫秒);

    2)setinterval():可按照指定的周期来调用函数或者计算表达式;

      语法:

      setInterval("函数名称",周期性调用函数之间间隔秒数);

下面简单书写两个关于定时器的例子:

   1.setTimeout()

1 //定义一个函数
2 function Refresh()
3 {
4 Time.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());
5 setTimeout("Refresh()",1000);
6 } 
7 //调用函数,逗号后为毫秒数(一分钟=60秒=60000毫秒)
8 var timer=setTimeout("Refresh()",1000); 

 

  2.setinterval()

1 //定义一个函数
2 function Refresh()
3 {
4 var newDateObj = new Date();
5 document.form1.txt_Time.value=newDateObj.toLocaleString();//使用当前区域设置并已被转换为字符串
6 } 
7 var MyInterval=setInterval("Refresh()",1000); 

 

也可以通过定时器来写一个自娱自乐的小程序,

  可以每隔1秒换一张图片

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 3     <title>时间函数</title>
 4     <script type="text/javascript">
 5 //定义变量,存储图片名称
 6 var i = 1;
 7         function go() {
 8             if (i<2) {
 9                 i++;
10             } else {
11                 i= 1;//图片循环打印完成再次赋初值1
12             }
13 //获取id为“ima”的doc对象,并为src属性再次赋值(路径)
14             var doc = document.getElementById("ima");
15             doc.src = 'images/iag/' + i + '.jpg';
16         }
17         setInterval(go, 1000);
18 </head>
19 <body>
20 //src为图片路径,所以图片名称均为数组(因为在这里便于逐步遍历出来)
21     <img src="images/iag/1.jpg" width="500px" height="600px" id="ima"/>
22 </body>

posted @ 2016-05-20 18:04  Tony_copper  阅读(407)  评论(1编辑  收藏  举报
 Tony