JavaScript 秒錶
Harshit Jindal
2024年2月15日
秒錶用於測量其啟用和停用之間的時間量。它有助於衡量特定活動所花費的時間。我們將使用 JavaScript 計時方法 setTimeout() 和 clearTimeout() 構建我們的秒錶，這有助於時間間隔相關的實現。秒錶有一個顯示屏和三個按鈕。顯示屏顯示時間以及啟動、停止和重置秒錶的三個按鈕。本教程教授如何用 JavaScript 構建秒錶。
JavaScript 秒錶
HTML 程式碼
<h1><time>00:00:00</time></h1>
<button id="strt">start</button>
<button id="stp">stop</button>
<button id="rst">reset</button>
在上面的程式碼中，我們使用 HTML 來顯示秒錶的時間並建立三個必需的按鈕 start、stop 和 reset。
JavaScript 程式碼
var h1 = document.getElementsByTagName('h1')[0];
var start = document.getElementById('strt');
var stop = document.getElementById('stp');
var reset = document.getElementById('rst');
var sec = 0;
var min = 0;
var hrs = 0;
var t;
function tick() {
sec++;
if (sec >= 60) {
sec = 0;
min++;
if (min >= 60) {
min = 0;
hrs++;
}
}
}
function add() {
tick();
h1.textContent = (hrs > 9 ? hrs : '0' + hrs) + ':' +
(min > 9 ? min : '0' + min) + ':' + (sec > 9 ? sec : '0' + sec);
timer();
}
function timer() {
t = setTimeout(add, 1000);
}
timer();
start.onclick = timer;
stop.onclick = function() {
clearTimeout(t);
} reset.onclick = function() {
h1.textContent = '00:00:00';
seconds = 0;
minutes = 0;
hours = 0;
}
-
我們首先使用選擇器選擇所有 HTML 元素，以便我們可以使用 JavaScript 操作它們並初始化
3個變數hrs、min和sec以儲存當前時間。我們還宣告瞭一個變數t來儲存setTimeout()並通過呼叫clearTimeout()清除它。 -
我們已將計時器功能附加到
開始按鈕。每當我們單擊start按鈕時，都會呼叫timer()函式，該函式又以1秒的間隔呼叫 add 函式。add()函式呼叫tick()函式以將秒增加1並相應地調整分鐘和小時。它重置顯示內容以顯示新時間，然後通過再次呼叫timer()函式呼叫自身。 -
我們已將
clearTimeout()附加到stop按鈕以停止定期呼叫新增函式。 -
我們附加了一個功能，將時間重置為
00:00:00，並將sec、min和hrs重置為0以重置reset按鈕。
作者： Harshit Jindal
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn