第十二章：第24节JavaScript内置对象——window对象（三）延时器和定时器

window对象方法：

这节介绍两组在做页面动态效果方面非常有用的方法——延时器和定时器。

1）延时器：时间一到就执行一次

setTimeout()

功能：设置延时器，时间一到就执行JS代码一次。（只执行一次）

语法：var timer = window.setTimeout(code,millisec)

参数：

  Code：是任何合法的JS代码，一般是JS函数

  Millisec：是毫秒值，也是延迟时间。多长时间后，执行JS代码一次。

返回值：返回一个延时器的id值，该id值可用于被清除。

如果setTimeout()想实现周期性执行，那么就需要在函数中重复不断的调用自己。

clearTimeout()

功能：清除延时器。

语法：window.clearTimeout(timer)

看演示代码：

说明：

用鼠标点击“开始”，触发点击事件，然后就执行“start2”函数。

13行、14行代码是document对象的内容，这段代码的功能“可以把27行input标签的value属性值修改掉”。

16行代码执行延时器，先稍等1秒，然后再执行start2函数，如果不执行“关闭”动作（21行代码），它会一直重复下去。

最终是一个动态的效果，需要大家下载代码运行才能看到效果。

提前介绍下document.getElementById()

JS可以随意修改HTML元素，这点PHP是不可以的。

JS要想操作某一个HTML元素，首先必须先要能访问到HTML元素。document.getElementById()是JS访问HTML元素的方法之一。

document.getElementById()

功能：获取网页中，指定ID的HTML元素。

语法：var obj = document.getElementById(“id”);

返回值：一定是一个网页对象。也可以说，HTML元素对应的元素对象。

HTML中的标记称为“元素”，那么“元素”对应的对象称为“元素对象”。

每一个标记的所有属性，与对应的“元素对象”的属性一一对应。

<input id="result" type="button" value="开始" />

<input>标记的属性有id、class、 title、style、type、value、name等。

input对象的属性有：id、className、title、style、type、value、name等。

//获取id=result的对象

var obj = document.getElementById("result");

obj.type = "password";

obj.size = 100;

obj.maxLength = 20;

修改元素对象属性值等于修改了标记元素属性值。

2）定时器：按照指定的时间周期执行

setInterval()

功能：每隔指定的毫秒数，就执行一次JS代码。(周期性、重复性)

语法：var timer = window.setInterval(code,millisec)

参数：

  code是任何合法的JS代码，一般是JS函数。该JS函数一定要加引号。

  millisec间隔的毫秒值。

返回值：将返回一个定时器变量，用于clearInterval()来清除定时器

举例：var timer = winodw.setInterval(“init()” , 2000);

clearInterval()

功能：清除由setInterval()设置的定时器。

语法：window.clearInterval(timer)

点击开始会出现幻灯片的效果。

总结：

延时器与定时器的区别主要是执行次数（一次还是无数次），不管是延时器还是定时器，通过代码都可以实现定时动态的效果。

本节学习代码》》》