在網(wǎng)頁設(shè)計中，倒計時功能是非常常見的，比如活動倒計時、秒殺倒計時等等。下面就介紹一種使用HTML和JavaScript實現(xiàn)8分鐘倒計時的代碼。
<!DOCTYPE html>
<html>
<head>
<title>8分鐘倒計時</title>
</head>
<body>
<div id="countdown"></div>
<script type="text/javascript">
var seconds = 480;
function countdown() {
var minutes = Math.floor(seconds / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById("countdown").innerHTML = "倒計時剩余時間：" + minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById("countdown").innerHTML = "倒計時已結(jié)束";
} else {
seconds--;
}
}
var countdownTimer = setInterval('countdown()', 1000);
</script>
</body>
</html>代碼解釋：
首先，在HTML中定義了一個div元素，用于顯示倒計時的時間；
然后，在JavaScript中使用setInterval函數(shù)，每隔一秒鐘執(zhí)行一次countdown函數(shù)；
countdown函數(shù)主要是根據(jù)剩余秒數(shù)計算出分鐘數(shù)和剩余秒數(shù)，并將其顯示在頁面上；
當秒數(shù)為0時，清除計時器，并顯示“倒計時已結(jié)束”的提示。
以上代碼在瀏覽器中運行后，將會顯示一個倒計時頁面，從480秒（8分鐘）開始倒計時，每秒鐘更新一次剩余時間。
下一篇css圖片與文字居中