JavaScript 秒錶

Harshit Jindal 2021年7月3日
JavaScript 秒錶

秒錶用於測量其啟用和停用之間的時間量。它有助於衡量特定活動所花費的時間。我們將使用 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 來顯示秒錶的時間並建立三個必需的按鈕 startstopreset

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;
}

javascript 秒錶

  • 我們首先使用選擇器選擇所有 HTML 元素,以便我們可以使用 JavaScript 操作它們並初始化 3 個變數 hrsminsec 以儲存當前時間。我們還宣告瞭一個變數 t 來儲存 setTimeout() 並通過呼叫 clearTimeout() 清除它。
  • 我們已將計時器功能附加到開始按鈕。每當我們單擊 start 按鈕時,都會呼叫 timer() 函式,該函式又以 1 秒的間隔呼叫 add 函式。add() 函式呼叫 tick() 函式以將秒增加 1 並相應地調整分鐘和小時。它重置顯示內容以顯示新時間,然後通過再次呼叫 timer() 函式呼叫自身。
  • 我們已將 clearTimeout() 附加到 stop 按鈕以停止定期呼叫新增函式。
  • 我們附加了一個功能,將時間重置為 00:00:00,並將 secminhrs 重置為 0 以重置 reset 按鈕。
Harshit Jindal avatar Harshit Jindal avatar

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