在Web页面中使用计时器

http://www.itjxue.com  2015-08-06 23:17  来源:未知  点击次数: 

 在Web页面中使用计时器

在JavaScript中,可以创建两种类型的计时器,即一次性计时器和间隔性触发计时器。一次性计时器仅在指定的延迟时间之后触发一次,而间隔性触发计时器每隔一定的时间间隔就触发一次。在下面的小节中,我们将详细讨论这两种计时器。

实际上,在JavaScript中可以根据需要设置多个计时器,并在代码中的任何地方启动计时器,例如在浏览器窗口的onload事件中启动计时器,或者在单击一个按钮时启动计时器。计时器常用在每隔一定间隔后翻转广告图片的情形,或者在Web页面中显示一个实时更新的时钟。另外,使用DHTML所创建的各种动画,都需要使用计时器的setTimeout()方法或者setInterval()方法—— 在本书的第12章和13章,我们将介绍DHTML的相关内容。

9.2.1  一次性计时器

要设置一个一次性计时器非常简单:只需使用window对象的setTimeout()方法。

window.setTimeout("your JavaScript code", milliseconds_delay)

setTimeout()方法接收两个参数,第一个参数是要执行的JavaScript代码,第二个参数是计时器延迟的时间,延迟时间是以毫秒(即千分之一秒)为单位的,当延迟时间结束时,第一个参数中的代码将被执行。

setTimeout()方法将返回一个值,该值是一个整数,这是唯一标识该计时器的一个ID号。如果在计时器启动后想要停止计时器,在JavaScript就可以使用该ID号来引用相应的计时器。

例如,要设置一个在页面加载3秒之后触发的计时器,可以使用如下所示的代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script language="JavaScript" type="text/javascript">

var timerID;

function window_onload()

{

timerID = setTimeout("alert(‘Times Up!’)",3000);

alert("Timer Set");

}

</script>

</head>

<body language = JavaScript onload="window_onload()">

</body>

</html>

将上面的代码保存为timertest.htm,并在浏览器中加载该文件。在浏览器窗口的onload事件之后延迟3000毫秒(即3秒钟)之后,将弹出一个消息对话框。

尽管setTimeout()方法是window对象的方法,但由于window对象位于浏览器对象模型层次结构的顶端,所以在引用window对象的属性或者方法时并不需要使用window对象名。因此,我们也可以将window.setTimeout()方法简写为setTimeout()方法。

值得注意的是,当设置一个计时器时并不会停止脚本代码的继续执行。计时器将在后台运行并在延迟到点之后触发。在这期间,页面将像往常一样运行,并且任何在启动计时器倒计时之后的代码都将继续执行。因此,在上面的例子中,在设置计时器的代码被执行之后,alert("Timer Set")语句将立即被执行,以弹出一个消息对话框,说明计时器已经被设置。

但是,如果要在计时器触发之前,停止计时器的执行,又该怎么办呢?

要清除一个计时器,可以使用window对象的clearTimeout()方法。该方法仅接收一个参数,即由setTimeout()方法返回的唯一的计时器ID号。

下面的代码修改了前面的例子,以提供一个按钮,当单击按钮时将停止计时器的执行。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script language=JavaScript type="text/javascript">

var timerID;

function window_onload()

{

timerID = setTimeout("alert(‘Times Up!’)",3000);

alert("Timer Set");

}

function butStopTimer_onclick()

{

clearTimeout(timerID);

alert("Timer has been cleared");

}

</script>

</head>

<body onload="window_onload()">

<form name=form1>

<input type="button" value="Stop Timer" name=butStopTimer language=JavaScript

onclick="return butStopTimer_onclick()">

</form>

</body>

</html>

将上面的代码保存为timertest2.htm,并在浏览器中加载该文件。如果在3秒钟的延迟到点之前,单击Stop Timer按钮,则该计时器将被清除。在代码中,Stop Timer按钮的onclick事件处理器被连接到了butStopTimer_onclick()事件处理函数,在该事件处理函数中,使用了window对象的clearTimeout()方法,将ID号为timerID的计时器清除。

 

在下面的例子中,我们将使用setTimeout()方法来更新广告标语。下面的代码将创建一个具有广告标语的Web页面,每隔3秒钟广告标语将更新一次。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script language=JavaScript type="text/javascript">

var currentImgNumber = 1;

var numberOfImages = 3;

function window_onload()

{

setTimeout("switchImage()",3000);

}

function switchImage()

{

currentImgNumber++;

document.imgAdvert.src = "AdvertImage" + currentImgNumber + ".jpg";

if (currentImgNumber < numberOfImages)

{

setTimeout("switchImage()",3000); }

}

</script>

</head>

<body onload="window_onload()">

<img src="AdvertImage1.jpg" name="imgAdvert">

</body>

</html>

在编辑器中输入上面的代码,并保存为Adverts.htm文件。另外,我们还需要创建三个图形文件:AdvertImage1.jpg、AdvertImage2.jpg和AdvertImage3.jpg文件(或者,也可以从本书的代码下载中获得这三个文件)。当页面被加载时,开始时将看到一个AdvertImage1.jpg图片,如图9-5所示。

图  9-5

3秒钟之后,该页面将显示第二幅图片,如图9-6所示。

图  9-6

最后,再经过3秒钟时间,将显示第三幅图片,也就是最后一幅图片,如图9-7所示。

图  9-7

代码解说

当页面加载时,<img>标记的src属性被设置为第一幅图片的文件名:

<img src="AdvertImage1.jpg" name="imgAdvert">

在<body>标记中,将window对象的onload事件处理器连接到了window_onload()事件处理函数。window_onload()函数如下所示:

function window_onload()

{

setTimeout("switchImage()",3000)

}

在window_onload()函数中,使用了setTimeout()方法以启动计时器的运行,该计时器将在延迟3s后调用switchImage()函数。因为这个计时器不需要清除处理,所以不必考虑保存setTimeout()方法所返回的计时器ID的值。

switchImage()函数用以改变页面中<img>标记所对应的img对象的src属性的值:

function switchImage()

{

currentImgNumber++;

document.imgAdvert.src = "AdvertImage" + currentImgNumber + ".jpg";

标语图片名中的数字是从1到3,即AdvertImage1.jpg、AdvertImage2.jpg、AdvertImage3.jpg。可以将页面中加载的当前标语图片的编号保存在全局变量currentImgNumber中,该变量定义于脚本块的顶部,并被初始化为1。要获得下一幅图片的编号,只需简单地将变量currentImgNumber的值加1,然后使用变量currentImgNumber的值来构造表示图片文件名的完整字符串,再修改img对象的src属性,以更新页面所加载的图片。

if (currentImgNumber < numberOfImages)

{

setTimeout("switchImage()",3000);

}

}

要显示的标语图片有三幅,变量currentImgNumber中保存的是当前图片的编号。因此,在上面的if语句中,将对变量currentImgNumber的值进行检查,以确定该变量的值是否小于3。如果小于3,则表示还有图片需要显示,因此设置另一个新的计时器,以启动一个新的倒计时触发。当再经过3s之后,该计时器将再次调用switchImage()函数。

在一些早期的浏览器中,只能使用上面的办法来创建每隔一定时间间隔就触发的计时器。但是,对于4.0版本以上的浏览器,还可以使用下面小节将要介绍的简单方法,以创建间隔性触发计时器。

9.2.2  创建间隔性触发计时器

在较新版本的浏览器中,window对象提供了一些新的方法用以设置计时器,即setInterval()方法和clearInterval()方法。除了所设置的计时器每隔一定时间间隔就触发一次外,这两个方法的工作方式与setTimeout()方法和clearTimeout()方法非常类似。

与setTimeout()方法类似,setInterval()方法接收两个参数,第一个参数表示计时器到点时要执行的代码,不同的是,第二个参数不再表示计时器触发之前的时间延迟,而是表示一个时间间隔,该间隔以毫秒为单位,每隔这个时间间隔之后,计时器就将触发一次。

例如,要设置一个每隔5s就触发一次myFunction()函数的计时器,可以使用如下所示的代码:

var myTimerID = setInterval("myFunction()",5000);

与setTimeout()方法类似,setInterval()方法也返回一个计时器唯一的ID号,如果要清除该计时器,可以使用clearInterval()方法,并将该ID号作为参数传入即可。clearInterval()方法与clearTimeout()方法非常类似,因此,要停止前面代码中启动的计时器,可以使用如下所示的代码:

clearInterval(myTimerID);

 

下面我们来修改一下前面例子中的世界时转换器,以在页面中显示一个本地时间和所选中城市时间的实时更新的时钟。

我们只需在文本编辑器中打开WorldTimeConverter.htm文件,并对其进行修改。在已经定义好的函数之前,添加如下所示的函数:

var daylightSavingAdjust = 0;

function window_onload()

{

updateTimeZone();

window.setInterval("updateTime()",1000);

}

function updateTimeZone()

{

并将<body>标记修改为如下所示的代码:

<body onload="return window_onload()">

保存该文件,并在浏览器中加载WorldTimeConverterFrameset.htm页面。你将看到一个与前面的例子中类似的页面,不同之处在于,页面上的时间每秒钟都被更新一次。

代码解说

实际上,我们仅对代码作了少量的修改。在window_onload()函数中,添加了一个新的计时器,该计时器每隔1000毫秒(即1s)调用一次updateTime()函数。该计时器将每隔1000毫秒触发一次,直到用户离开该页面为止。在前面的例子中,仅当用户选中了下拉列表框中一个不同的城市时,或者当单击了夏令时复选框时,才会调用updateTime()函数。

window_onload()函数被连接到了window对象的onload事件,因此一旦页面被加载后,计时器就将开始运行。

关于计时器和世界时转换器的例子,我们就介绍到这里。在下面的小节中,我们将应用上面所学到的知识,将“在线小测试”程序修改为一个具有时间限制的测试程序。

(责任编辑:IT教学网)

更多

推荐Javascript/Ajax文章