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