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