HTML DOM 快速導覽 - window 物件的方法 setInterval()

window.setInterval() 設定的間隔時間重複動作。



setInterval() 雖然是 window 物件的方法，在多數瀏覽器中也可單獨使用，也就是直接呼叫 setInterval() ，不需要寫 window.setInterval() 。


setInterval() 需要至少兩個參數
id = window.setInterval(code, delay);


id 為 setInterval() 的回傳值， code 為重複動作的程式碼，通常為函數名稱， delay 則是延遲時間，也就是重複動作的間隔時間單位為毫秒。舉例如下
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
var intervalID;
 
function run() {
    intervalID = window.setInterval(textColor, 2000);
}
 
function stop() {
    window.clearInterval(intervalID);
}
 
function textColor() {
    var t = document.getElementById("demo");
    t.style.color = randomColor();
}
 
function randomColor() {
    var c1 = (Math.random() * 1000) % 256;
    var c2 = (Math.random() * 1000) % 256;
    var c3 = (Math.random() * 1000) % 256;
    c1 = hex(Math.floor(c1));
    c2 = hex(Math.floor(c2));
    c3 = hex(Math.floor(c3));
    return "#" + c1 + c2 + c3;
}
 
function hex(n) {
    var result = "";
    var temp, count;
    while (n > 16) {
        count = 1;
        while (n > exp(16, count)) {
            count += 1;
        }
        count -= 1;
        temp = n / exp(16, count);
        temp = Math.floor(temp);
        result += hexLetter(temp);
        n -= exp(16, count) * temp;
    }
    if (n == 16) {
        result += "1";
        n -= 16;
    }
    result += hexLetter(n);
     
    return result;
}
 
function hexLetter(n) {
    if (n >= 16 || n < 0) {
        return "";
    }
    else {
        switch (n) {
            case 10:
                return "A";
            case 11:
                return "B";
            case 12:
                return "C";
            case 13:
                return "D";
            case 14:
                return "E";
            case 15:
                return "F";
            default:
                return "" + n;
        }
    }
}
 
function exp(x, y) {
    var result = 1;
    while (y > 0) {
        result *= x;
        y -= 1;
    }
     
    return result;
}
 
 
/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：window048.js
     功能：示範 JavaScript 程式
     作者：張凱慶
     時間：西元 2011 年 8 月 */


這裡設計 run() 函數呼叫 setInterval() ，每隔兩秒執行一次 textColor() 函數，也就是隨機改變文字顏色
3
4
5
function run() {
    intervalID = window.setInterval(textColor, 2000);
}


我們以的 HTML 文件載入
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="window048.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="RUN" onclick="run();">
<input type="button" value="STOP" onclick="stop();">
<div id="demo" style="font-size:x-large;">There is no spoon.</div>
</body>
</html>
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：window048.html
     功能：示範 JavaScript 程式
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


瀏覽器 (broswer) 開啟後，點擊 RUN 文字就會每隔兩秒自動變換隨機顏色，再次點擊 STOP 就會停止變換隨機顏色




中英文術語對照
瀏覽器broswer


您可以繼續參考
window 物件


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/window.setInterval
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)