JavaScript 秒錶

Harshit Jindal 2024年2月15日 JavaScript
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 來顯示秒錶的時間並建立三個必需的按鈕 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;
}

javascript 秒錶

  • 我們首先使用選擇器選擇所有 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 按鈕。
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
作者： Harshit Jindal
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