實現網頁動畫-setInterval()

在網頁上實現動畫可以透過 JavaScript 或是 CSS 設定,如果是 JavaScript 通常會調用 setInterval() 函式重複輸出靜態內容以模擬動畫,例如以下的倒數效果:


此動畫效果需要以下的程式碼:

var i = 10;
setInterval(function () {
document.getElementById('msg').innerHTML = i;
i--;
if (i < 0) i = 10;
}, 1000);

變數 i 為所要輸出的倒數數字。 setInterval() 有兩個參數,第一個參數為所要執行的程式功能,其中輸出 i 的值,然後將其減 1 ,並且在 i<0 時將其重設為 10 ,第二個參數 1000 表示每 1000 毫秒執行第一個參數的內容。當 setInterval() 這一行程式碼開始執行,每 1 秒便會重新執行其中的函式,因此可以呈現動畫的效果。如果動畫函式比較複雜或是其需要共用,可以將其獨立出來,例:

function countdown () {
document.getElementById('msg').innerHTML = i;
i--;
if (i < 0) i = 10;
}

現在將 countdown 名稱直接代入即可:

<script>
var i = 10;
setInterval( countdown , 1000);
</script>

請特別注意,第一個參數只能是函式的名稱,不能有括弧或是參數。

實現網頁動畫-setTimeout()


沒有留言: