透過 JavaScript, 是可以執行一些程式碼而不須立即執行已呼叫的功能,而在特訂的時間差異後才執行,這就叫時間事件。


線上範例

簡單計時一

簡單計時二

無限迴圈的計時事件

無限迴圈的計時事件及 Stop 按紐

具有計時事件的時鐘


JavaScript 計時事件

有了 JavaScript, 它可以在某個功能放呼叫後不須馬上執行它的程式碼,而在一段時間間隔之後才執行。這就叫計時事件。

在JavaScript來做計時事件是很容易的。 二個關鍵方法使用如下:

  • setTimeout() - 設定在未來的某個時間執行程式碼
  • clearTimeout() - 取消掉 setTimeout() 的功能

setTimeout()

語法

var t=setTimeout("javascript 敘述",百萬分之秒)

在上面的例子裏 setTimeout() 的方法將傳回一個值,這個值是存在變數" t "裏。如果你要取消時間的設定  setTimeout() ,你可以用它來做別的變數名稱。

 setTimeout() 的第一個參數是一個字串,它包含了一段敘述。這段敘述可能是一段聲明,例如是"警告視窗('5秒')" "alert('5 seconds!')" 或是呼叫一個功能如"警告訊息" "alertMsg()"。

第二個參數指示從現在開始,要在多少豪秒內你要它執行第一個參數。 

註:  1000 豪秒就是一秒。

範例

在下面的原始碼裏(如線上範例簡單計時一)當按紐被按下時,一個警告視窗會在五秒後跳出顯示訊息: 






onClick="timedMsg()">


範例 - 無盡迴圈

要使一個計時器像無盡迴圈的執行工作,我們必須寫一個會自已呼叫自已的功能 function,在下面的例子中(如線上範例無線迴圈的計時事件),當按紐被按下時,輸入區域內的空白會從0開始計時,若你不關掉視窗的話,它不會停。






onClick="timedCount()">//按了一下鍵後會呼叫timeCount
txt
">



clearTimeout()

語法

clearTimeout(setTimeout_variable)

範例

下面的範例和上述的無限迴圈一樣,差別是我們增加了一個"停止計時""Stop Count!"按紐,能夠停止這個計時器。 






onClick="timedCount()">

//按紐名稱
onClick="
stopCount()">



創作者介紹
創作者 easonyo 的頭像
easonyo

wEb 亂講

easonyo 發表在 痞客邦 留言(0) 人氣()