在 Web 開發中經常需要用到倒計時功能，而 HTML5 可以通過 JavaScript 實現動態計時器，下面是一個簡單的 HTML5 動態計時器代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>倒計時動態計時器</title>
<script>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var duration = 60 * 10,
display = document.querySelector('#timer');
startTimer(duration, display);
};
</script>
</head>
<body>
<div>距離結束還有<span id="timer">10:00</span>秒</div>
</body>
</html>代碼解析：
首先，我們在 header 中引入了一個 JavaScript，該函數定義了一個 startTimer() 函數，該函數通過 setInterval 定時器循環執行。
在 startTimer() 函數中，我們定義了一個定時器，它用來控制倒計時的過程。該函數中，我們首先設置了計時器的時間 duration，這里我們設置為 10 分鐘，即 600 秒。我們還定義了一個 display 變量，該變量綁定了頁面中的一個 span 元素，用于展示倒計時時間。接著，我們計算出分鐘數和秒數，并格式化它們。最后我們將格式化后的時間展示在頁面中。當計時器為 0 時，我們將計時器重置為初始值。在頁面加載完成后，我們執行了 startTimer() 函數。
這里需要注意的是，我們要在頁面中添加一個 div 元素，用于展示倒計時的時間。在該 div 元素中，我們使用了 span 元素來展示動態變化的時間。
總結：
HTML5 通過 JavaScript 讓 Web 應用變得更加強大，我們可以通過 JavaScript 實現動態計時器之外，還可以實現日歷、投票、音頻、視頻等動態效果。這些功能都可以讓我們的網頁變得更加美觀、實用。HTML5 技術正在不斷地發展和壯大，相信未來的 Web 開發界一定會越來越強大！
上一篇html5動畫源代碼