JavaScript 計時事件LOGIN

JavaScript 計時事件

JavaScript 計時事件

透過使用 JavaScript,我們有能力作到在一個設定的時間間隔之後來執行程式碼,而不是在函數被呼叫後立即執行。我們稱之為計時事件。

在 JavaScritp 中使用計時事件是很容易的,兩個關鍵方法是:

setInterval() - 間隔指定的毫秒數不停地執行指定的程式碼。

setTimeout() - 暫停指定的毫秒數後執行指定的程式碼

Note: setInterval() 和 setTimeout() 是 HTML DOM Window物件的兩個方法。

setInterval() 方法

setInterval() 間隔指定的毫秒數不停地執行指定的程式碼

語法

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用window前綴,直接使用函數setInterval()。

setInterval() 第一個參數是函數(function)。

第二個參數間隔的毫秒數

注意: 1000 毫秒是一秒。

每三秒彈出 "hello" :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setInterval(function(){alert("Hello")},3000);
}
</script>
</body>
</html>

如何停止執行?

clearInterval() 方法用於停止 setInterval() 方法執行的函數程式碼。

語法

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前綴,直接使用函數clearInterval()。

要使用 clearInterval() 方法, 在建立計時方法時你必須使用全域變數:

myVar=setInterval("javascript function",milliseconds);

#然後你可以使用clearInterval() 方法來停止執行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script>
var t = self.setInterval("clock()",50)
function clock()
{
var time=new Date()
document.getElementById("clock_show").innerHTML=time
}
</script>
</head>
<body>
  <p id="clock_show"></p>
  <button onclick="window.clearInterval(t)">停止计时</button>
</body>
</html>

setTimeout() 方法

語法

window.setTimeout("javascript 函數",毫秒數);

setTimeout() 方法會傳回某個值。在上面的語句中,值被儲存在名為 t 的變數中。假如你希望取消這個 setTimeout(),你可以使用這個變數名稱來指定它。

setTimeout() 的第一個參數是含有 JavaScript 語句的字串。這個語句可能諸如"alert('5 seconds!')",或者對函數的調用,諸如alertMsg()"。

第二個參數指示從當前起多少毫秒後執行第一個參數。

提示:1000 毫秒等於一秒。

語法

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不使用window 前綴。在建立超時方法中(setTimeout)使用全域變數:

myVar=setTimeout("javascript function",milliseconds);

如果函數還未被執行,可以使用clearTimeout() 方法來停止執行函數程式碼。下一節
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script> var s = 0; var n = 0; var t; function timeCount() { document.getElementById('second_show').value = s; n = n+1; s = n/10; t = setTimeout("timeCount()",100); } </script> </head> <body> <form> <input type="button" value="开始计时" onClick="timeCount()"> <input type="text" id="second_show"> <input type="button" value="结束计时" onClick="clearTimeout(t)"> </form> </body> </html>
章節課件