在Web页面中使用计时器.docxVIP

PAGE PAGE # 在Web页面中使用计时器 在JavaScript中，可以创建两种类型的计时器，即一次性计时器和间 隔性触发计时器。一次性计时器仅在指定的延迟时间之后触发一次， 而间隔 性触发计时器每隔一定的时间间隔就触发一次。 在下面的小节中，我们将详 细讨论这两种计时器。 实际上，在JavaScript中可以根据需要设置多个计时器，并在代码中 的任何地方启动计时器，例如在浏览器窗口的 onload事件中启动计时器， 或者在单击一个按钮时启动计时器。计时器常用在每隔一定间隔后翻转广告 图片的情形，或者在Web页面中显示一个实时更新的时钟。另外，使用DHTML 所创建的各种动画，都需要使用计时器的 setTimeout()方法或者 setlnterval() 方法—— 在本书的第12章和13章，我们将介绍DHTML勺相 关内容。 9.2.1 一次性计时器 要设置一个一次性计时器非常简单：只需使用 win dow对象的 setTimeout()方法。 window.setTimeout(your JavaScript code, milliseconds_delay) setTimeout()方法接收两个参数，第一个参数是要执行的 JavaScript 代码，第二个参数是计时器延迟的时间， 延迟时间是以毫秒(即千分之一秒) 为单位的，当延迟时间结束时，第一个参数中的代码将被执行。 setTimeout()方法将返回一个值，该值是一个整数，这是唯一标识该计 时器的一个ID号。如果在计时器启动后想要停止计时器， 在JavaScript就 可以使用该ID号来引用相应的计时器。 例如，要设置一个在页面加载 3秒之后触发的计时器，可以使用如下所 示的代码： !DOCTYPE HTML PUB LIC -//W3C//DTD HTML 4.01 Transitional//EN 7html4/loose.dtd html head script language=JavaScript type=text/javascript var timerlD; function window_onload() Times Up! ),3000); Times Up! ),3000); } v/script v/head vbody language = JavaScript onload=window_onload() /body /html 将上面的代码保存为timertest.htm ，并在浏览器中加载该文件。在浏 览器窗口的onload事件之后延迟3000毫秒(即3秒钟)之后，将弹出一个消 息对话框。 尽管setTimeout()方法是window对象的方法，但由于window对象位于 浏览器对象模型层次结构的顶端，所以在引用 wi ndow对象的属性或者方法 时并不需要使用 window对象名。因此，我们也可以将 window.setTimeout() 方法简写为setTimeout()方法。 值得注意的是，当设置一个计时器时并不会停止脚本代码的继续执行。 计时器将在后台运行并在延迟到点之后触发。在这期间，页面将像往常一样 运行，并且任何在启动计时器倒计时之后的代码都将继续执行。因此，在上 面的例子中，在设置计时器的代码被执行之后， alert(Timer Set)语句将 立即被执行，以弹出一个消息对话框，说明计时器已经被设置。 但是，如果要在计时器触发之前，停止计时器的执行，又该怎么办呢？ 要清除一个计时器，可以使用 window对象的clearTimeout()方法。该 方法仅接收一个参数，即由setTimeout()方法返回的唯一的计时器ID号。 下面的代码修改了前面的例子，以提供一个按钮，当单击按钮时将停止计时器的执行。 !DOCTYPE HTML PUB LIC -//W3C//DTD HTML 4.01 Transitional//EN 7html4/loose.dtd html head vscript language=JavaScript type=text/javascript var timerlD; function window_onload() { timerl D = setTimeout(alert( ‘ Times Up! ),3000); alert(Timer Set); } function butStopTimer_onclick() { clearTimeout(timerlD); alert(Timer has been cleared); } /script v/head body onload=window_onload() vform name=form1 vinput