Javascript進階篇——瀏覽器對象—JavaScript計時器

---恢復內容開始--- JavaScript 計時器在JavaScript中，我們可以在設定的時間間隔之後來執行代碼，而不是在函數被調用後立即執行。計時器類型：一次性計時器：僅在指定的延遲時間之後觸發一次。間隔性觸發計時器：每隔一定的時間間隔就觸發一次。計時器方法：計時器setInterval(

---恢復內容開始---

JavaScript 計時器
在JavaScript中，我們可以在設定的時間間隔之後來執行代碼，而不是在函數被調用後立即執行。
計時器類型：
一次性計時器：僅在指定的延遲時間之後觸發一次。
間隔性觸發計時器：每隔一定的時間間隔就觸發一次。
計時器方法：

計時器setInterval()
在執行時,從載入頁面後每隔指定的時間執行代碼。
語法:

setInterval(代碼,交互時間);
//1. 代碼：要調用的函數或要執行的代碼串。
//2. 交互時間：周期性執行或調用表達式之間的時間間隔，以毫秒計（1s=1000ms）。

返回值:
　　一個可以傳遞給 clearInterval() 從而取消對"代碼"的周期性執行的值。
　　調用函數格式(假設有一個clock()函數):

setInterval("clock()",1000)
//或
setInterval(clock,1000)

我們設置一個計時器，每隔100毫秒調用clock()函數，並將時間顯示出來，代碼如下:

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>計時器</title>
 6 <script type="text/javascript">
 7     var int=setInterval(clock, 100)
 8     function clock(){
 9         var time=new Date();
10         document.getElementById("clock").value = time;
11     }
12 </script>
13 </head>
14 <body>
15     <form>
16         <input type="text" id="clock" size="50" />
17     </form>
18 </body>
19 </html>

例：定時器獲取時間，格式"時:分:秒"

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定時器</title>
<script type="text/javascript">
    var attime;
    function clock(){
        var time=new Date();          
        attime= time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
        document.getElementById("clock").value = attime;
    }
    setInterval(clock);
</script>
</head>
<body>
    <form>
        <input type="text" id="clock" size="50"  />
    </form>
</body>
</html>

運行結果：

取消計時器clearInterval()
clearInterval() 方法可取消由 setInterval() 設置的交互時間。
語法：

clearInterval(id_of_setInterval)
//參數說明:
//id_of_setInterval：由 setInterval() 返回的 ID 值。

每隔 100 毫秒調用 clock() 函數,並顯示時間。當點擊按鈕時，停止時間,代碼如下:

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>計時器</title>
 6 <script type="text/javascript">
 7     function clock(){
 8         var time=new Date();                     
 9         document.getElementById("clock").value = time;
10     }
11     // 每隔100毫秒調用clock函數，並將返回值賦值給i
12     var i=setInterval("clock()",100);
13 </script>
14 </head>
15 <body>
16     <form>
17         <input type="text" id="clock" size="50"  />
18         <input type="button" value="Stop" onclick="clearInterval(i)"  />
19     </form>
20 </body>
21 </html>

計時器setTimeout()

setTimeout()計時器，在載入後延遲指定時間後,去執行一次表達式,僅執行一次。
語法:

setTimeout(代碼,延遲時間);
//參數說明：
//1. 要調用的函數或要執行的代碼串。
//2. 延時時間：在執行代碼前需等待的時間，以毫秒為單位（1s=1000ms)。

當我們打開網頁3秒後，在彈出一個提示框，代碼如下:

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <script type="text/javascript">
 5     setTimeout("alert('Hello!')", 3000 );
 6 </script>
 7 </head>
 8 <body>
 9 </body>
10 </html>

當按鈕start被點擊時，setTimeout()調用函數，在5秒後彈出一個提示框。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <script type="text/javascript">
 5     function tinfo(){
 6         var t=setTimeout("alert('Hello!')",5000);
 7     }
 8 </script>
 9 </head>
10 <body>
11     <form>
12         <input type="button" value="start" onClick="tinfo()">
13     </form>
14 </body>
15 </html>

要創建一個運行於無窮迴圈中的計數器，我們需要編寫一個函數來調用其自身。在下麵的代碼，當按鈕被點擊後，輸入域便從0開始計數。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <script type="text/javascript">
 5     var num=0;
 6     function numCount(){
 7         document.getElementById('txt').value=num;
 8         num=num+1;
 9         setTimeout("numCount()",1000);
10     }
11 </script>
12 </head>
13 <body>
14     <form>
15         <input type="text" id="txt" />
16         <input type="button" value="Start" onClick="numCount()" />
17     </form>
18 </body>
19 </html>

使用setTimeout()實現計數統計效果，併在文本框中顯示數值。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>計時器</title>
 6 </head>
 7 <script type="text/javascript">
 8     var num=0;
 9     function startCount() {
10         document.getElementById('count').value=num;
11         num=num+1;
12         setTimeout("startCount()",1000);
13     }
14     setTimeout("startCount()",1000);
15 </script>
16 </head>
17 <body>
18     <form>
19         <input type="text" id="count"/>
20     </form>
21 </body>
22 </html>

取消計時器clearTimeout()
setTimeout()和clearTimeout()一起使用，停止計時器。
語法:

clearTimeout(id_of_setTimeout)
//參數說明:
//id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執行代碼塊。

下麵的例子和上節的無窮迴圈的例子相似。唯一不同是，現在我們添加了一個 "Stop" 按鈕來停止這個計數器：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <script type="text/javascript">
 5     var num=0,i;
 6     function timedCount(){
 7         document.getElementById('txt').value=num;
 8         num=num+1;
 9         i=setTimeout(timedCount,1000);
10     }
11     setTimeout(timedCount,1000);
12     //取消計時器，停止
13     function stopCount(){
14         clearTimeout(i);
15     }
16 </script>
17 </head>
18 <body>
19     <form>
20         <input type="text" id="txt">
21         <input type="button" value="Stop" onClick="stopCount()">
22     </form>
23 </body>
24 </html>

取消計時器。點擊Start按鈕後，開始計數。點擊Stop按鈕後，停止計數。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>計時器</title>
 6 </head>
 7 <script type="text/javascript">
 8     var num=0;
 9     var i;
10     function startCount(){
11     document.getElementById('count').value=num;
12         num=num+1;
13         i=setTimeout("startCount()",1000);
14     }
15     function stopCount(){
16        clearTimeout(i);
17     }
18 </script>
19 </head>
20 <body>
21     <form>
22         <input type="text" id="count" />
23         <input type="button" value="Start" onclick = startCount()/>
24         <input type="button" value="Stop" onclick = stopCount()/>
25     </form>
26 </body>
27 </html>