【公告】網站目前停止所有的課程訂閱服務,除了 7 月底預計完成上線的 KBF 餘下課程影片,將不會再新增其它課程內容,原有學員權益不受影響,造成不便還請見諒,我們正在開發以 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供更好的課程訂閱服務,感謝學員的支持。

實現網頁動畫-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()


沒有留言: