DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 在Web頁面中使用計時器
在Web頁面中使用計時器
編輯:關於JavaScript     
 在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 Transiti

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved