HTML5是一種用于網頁設計和開發的語言，它引入了新的元素和API，使得開發者可以更加方便地構建豐富和交互性的網頁和應用程序。其中一個有用的元素就是計時器，可以用來度量時間和執行定時操作。本文將介紹使用HTML5創建一個簡單的秒表計時器代碼。
<!DOCTYPE html>
<html>
<head>
<title>秒表計時器</title>
</head>
<body>
<div>
<h1>秒表計時器</h1>
<p><span id="time">00:00:00</span></p>
<button id="start" onclick="startTime()">開始計時</button>
<button id="stop" onclick="stopTime()">停止計時</button>
<button id="reset" onclick="resetTime()">重置計時</button>
</div>
<script>
var sec = 0;
var min = 0;
var hr = 0;
var t;
function add() {
sec++;
if (sec >= 60) {
sec = 0;
min++;
if (min >= 60) {
min = 0;
hr++;
}
}
document.getElementById("time").innerHTML =
(hr ? (hr >9 ? hr : "0" + hr) : "00") + ":" +
(min ? (min >9 ? min : "0" + min) : "00") + ":" +
(sec >9 ? sec : "0" + sec);
timer();
}
function startTime() {
timer();
}
function timer() {
t = setTimeout(add, 1000);
}
function stopTime() {
clearTimeout(t);
}
function resetTime() {
document.getElementById("time").innerHTML = "00:00:00";
sec = 0;
min = 0;
hr = 0;
stopTime();
}
</script>
</body>
</html>以上代碼定義了四個變量：sec用于記錄秒數，min用于記錄分鐘數，hr用于記錄小時數。add()函數會在每秒被調用一次，用于更新時間顯示，并判斷是否到達59秒或者59分鐘需要進位。startTime()函數用于啟動計時器。timer()函數則在每秒調用一次add()函數。stopTime()函數用于停止計時器并清除定時器。resetTime()函數用于重置計時器并清除定時器。
在HTML中，我們使用 <span> 元素來顯示當前的計時時間。同時，使用 <button> 元素來添加開始計時、停止計時和重置計時等按鈕。
使用以上代碼，可以輕松實現一個簡單的秒表計時器，為網頁和應用程序增加更多的功能和交互性。HTML5為開發者提供了更多的元素和API，讓我們更容易地開發出創意豐富的網頁和應用程序。
上一篇net 讀取css
下一篇mui里css樣式解析