JavaScript 秒表
Harshit Jindal
2021年7月3日
秒表用于测量其激活和停用之间的时间量。它有助于衡量特定活动所花费的时间。我们将使用 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
按钮。
Author: 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