在Web页面中使用计时器

《在Web页面中使用计时器》由会员分享，可在线阅读，更多相关《在Web页面中使用计时器（8页珍藏版）》请在装配图网上搜索。

1、在Web页面中使用计时器在JavaScript中，可以创建两种类型的计时器，即一次性计时器和间隔性触发计时器。一次性计时器仅在指定的延迟时间之后触发一次，而间隔性触发计时器每隔一定的时间间隔就触发一次。在下面的小节中，我们将详细讨论这两种计时器。实际上，在JavaScript中可以根据需要设置多个计时器，并在代码中的任何地方启动计时器，例如在浏览器窗口的onload事件中启动计时器，或者在单击一个按钮时启动计时器。计时器常用在每隔一定间隔后翻转广告图片的情形，或者在Web页面中显示一个实时更新的时钟。另外，使用DHTML所创建的各种动画，都需要使用计时器的setTimeout()方法或者set

2、Interval()方法在本书的第12章和13章，我们将介绍DHTML的相关内容。921一次性计时器要设置一个一次性计时器非常简单：只需使用window对象的setTimeout()方法。window.setTimeout(yourJavaScriptcode,milliseconds_delay)setTimeout()方法接收两个参数，第一个参数是要执行的JavaScript代码，第二个参数是计时器延迟的时间，延迟时间是以毫秒(即千分之一秒)为单位的，当延迟时间结束时，第一个参数中的代码将被执行。setTimeout()方法将返回一个值，该值是一个整数，这是唯一标识该计时器的一个ID号。如

3、果在计时器启动后想要停止计时器，在JavaScript就可以使用该ID号来引用相应的计时器。例如，要设置一个在页面加载3秒之后触发的计时器，可以使用如下所示的代码：vartimerlD;functionwindow_onload()timerlD=setTimeout(alert(TimesUp!),3000);alert(TimerSet);将上面的代码保存为timertest.htm,并在浏览器中加载该文件。在浏览器窗口的onload事件之后延迟3000毫秒(即3秒钟)之后，将弹出一个消息对话框。尽管setTimeout()方法是window对象的方法，但由于window对象位于浏览器对象

4、模型层次结构的顶端，所以在引用window对象的属性或者方法时并不需要使用window对象名。因此，我们也可以将window.setTimeout()方法简写为setTimeout()方法。值得注意的是，当设置一个计时器时并不会停止脚本代码的继续执行。计时器将在后台运行并在延迟到点之后触发。在这期间，页面将像往常一样运行，并且任何在启动计时器倒计时之后的代码都将继续执行。因此，在上面的例子中，在设置计时器的代码被执行之后，alert(TimerSet)语句将立即被执行，以弹出一个消息对话框，说明计时器已经被设置。但是，如果要在计时器触发之前，停止计时器的执行，又该怎么办呢？要清除一个计时器，可

5、以使用window对象的clearTimeout()方法。该方法仅接收一个参数，即由setTimeout()方法返回的唯一的计时器ID号。下面的代码修改了前面的例子，以提供一个按钮，当单击按钮时将停止计时器的执行。vartimerlD;:timerlD=setTimeout(alert(TimesUp!),3000);alert(TimerSet);functionbutStopTimer_onclick()clearTimeout(timerlD);alert(Timerhasbeencleared);将上面的代码保存为timertest2.htm,并在浏览器中加载该文件。如果在3秒钟的延迟

6、到点之前，单击StopTimer按钮，则该计时器将被清除。在代码中，StopTimer按钮的onclick事件处理器被连接到了butStopTimer_onclick()事件处理函数，在该事件处理函数中，使用了window对象的clearTimeout()方法，将ID号为timerlD的计时器清除。在下面的例子中，我们将使用setTimeout()方法来更新广告标语。下面的代码将创建一个具有广告标语的Web页面，每次。隔3秒钟广告标语将更新varcurrentlmgNumber=1;varnumberOflmages=3;functionwindow_onload()setTimeout(sw

7、itchImage(),3000);functionswitchImage()currentlmgNumber+;document.imgAdvert.src=AdvertImage+currentImgNumber+.jpg;if(currentImgNumbernumberOfImages)setTimeout(switchImage(),3000);在编辑器中输入上面的代码，并保存为Adverts.htm文件。另外，我们还需要创建三个图形文件：Advertlmagel.jpg、Advertlmage2.jpg和Advertlmage3.jpg文件(或者，也可以从本书的代码下载中获得这三个

8、文件）。当页面被加载时，开始时将看到一个Advertlmagel.jpg图片，如图9-5所示。澎-MflndcwsIntemeiExplore叵因Ip-1Fit斷两FtfflKitMTi|rtt&呑1:独比甘理袖灯匕.血?-”JTert”YourAdvertHere:&ons0bn/lEme蚁mi：”图9-53秒钟之后，该页面将显示第二幅图片，如图9-6所示。图9-6最后，再经过3秒钟时间，将显示第三幅图片，也就是最后一幅图片,如图9-7所示。图9-7代码解说当页面加载时，img标记的src属性被设置为第一幅图片的文件名：imgsrc=Advertlmage1.jpgname=imgAdver

9、t在body标记中，将window对象的onload事件处理器连接到了window_onload()事件处理函数。window_onload()函数如下所示：functionwindow_onload()setTimeout(switchlmage(),3000)在window_onload()函数中，使用了setTimeout()方法以启动计时器的运行，该计时器将在延迟3s后调用switchlmage()函数。因为这个计时器不需要清除处理，所以不必考虑保存setTimeout()方法所返回的计时器ID的值。switchlmage()函数用以改变页面中img标记所对应的img对象的src属性的

10、值：functionswitchImage()currentlmgNumber+;document.imgAdvert.src=AdvertImage+currentImgNumber+.jpg;标语图片名中的数字是从1到3,即Advertlmagel.jpg、Advertlmage2.jpg、Advertlmage3.jpg。可以将页面中加载的当前标语图片的编号保存在全局变量currentlmgNumber中，该变量定义于脚本块的顶部，并被初始化为1。要获得下一幅图片的编号，只需简单地将变量currentlmgNumber的值加1，然后使用变量currentlmgNumber的值来构造表示图

11、片文件名的完整字符串，再修改img对象的src属性，以更新页面所加载的图片。if(currentlmgNumbernumberOflmages)setTimeout(switchlmage(),3000);要显示的标语图片有三幅，变量currentlmgNumber中保存的是当前图片的编号。因此，在上面的if语句中，将对变量currentlmgNumber的值进行检查，以确定该变量的值是否小于3。如果小于3,则表示还有图片需要显示，因此设置另一个新的计时器，以启动一个新的倒计时触发。当再经过3s之后，该计时器将再次调用switchlmage()函数。在一些早期的浏览器中，只能使用上面的办法来创

12、建每隔一定时间间隔就触发的计时器。但是，对于4.0版本以上的浏览器，还可以使用下面小节将要介绍的简单方法，以创建间隔性触发计时器。922创建间隔性触发计时器在较新版本的浏览器中，window对象提供了一些新的方法用以设置计时器，即setlnterval()方法和clearInterval()方法。除了所设置的计时器每隔一定时间间隔就触发一次外，这两个方法的工作方式与setTimeout()方法和clearTimeout()方法非常类似。与setTimeout()方法类似，setinterval()方法接收两个参数，第一个参数表示计时器到点时要执行的代码，不同的是，第二个参数不再表示计时器触发之

13、前的时间延迟，而是表示一个时间间隔，该间隔以毫秒为单位，每隔这个时间间隔之后，计时器就将触发一次。例如，要设置一个每隔5s就触发一次myFunction()函数的计时器，可以使用如下所示的代码：varmyTimerlD=setlnterval(myFunction(),5000);与setTimeout()方法类似，setInterval()方法也返回一个计时器唯一的ID号，如果要清除该计时器，可以使用clearInterval()方法，并将该ID号作为参数传入即可。clearInterval()方法与clearTimeout()方法非常类似，因此，要停止前面代码中启动的计时器，可以使用如下所

14、示的代码：clearlnterval(myTimerlD);下面我们来修改一下前面例子中的世界时转换器，以在页面中显示一个本地时间和所选中城市时间的实时更新的时钟。我们只需在文本编辑器中打开WorldTimeConverter.htm文件，并对其进行修改。在已经定义好的函数之前，添加如下所示的函数：vardaylightSavingAdjust=0;functionwindow_onload()updateTimeZone();window.setlnterval(updateTime(),1000);functionupdateTimeZone()并将标记修改为如下所示的代码：保存该文件，并

15、在浏览器中加载WorldTimeConverterFrameset.htm页面。你将看到一个与前面的例子中类似的页面，不同之处在于，页面上的时间每秒钟都被更新一次。代码解说实际上，我们仅对代码作了少量的修改。在window_onload()函数中，添加了一个新的计时器，该计时器每隔1000毫秒(即Is)调用一次updateTime()函数。该计时器将每隔1000毫秒触发一次，直到用户离开该页面为止。在前面的例子中，仅当用户选中了下拉列表框中一个不同的城市时，或者当单击了夏令时复选框时，才会调用updateTime()函数。window_onload()函数被连接到了window对象的onload事件，因此一旦页面被加载后，计时器就将开始运行。关于计时器和世界时转换器的例子，我们就介绍到这里。在下面的小节中，我们将应用上面所学到的知识，将“在线小测试”程序修改为一个具有时间限制的测试程序。