向我的 Javascript 秒表添加毫秒

Question

我使用 HTML 和 Javascript 为秒表创建了一个脚本。我让它以小时分钟和秒为单位工作。我还有停止-启动计时器、停止计时器和清除计时器的功能。

谁能帮我在秒表脚本中添加毫秒？

到目前为止，这是我的代码：

var h1 = document.getElementsByTagName('h1')[0],
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }
    
    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}
timer();


/* Start button */
start.onclick = timer;

/* Stop button */
stop.onclick = function() {
    clearTimeout(t);
}

/* Clear button */
clear.onclick = function() {
    h1.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}

<h1><time>00:00:00</time></h1>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>

Answer 1

在现有代码中添加毫秒是相当简单的。你只需要遵循你已经建立的基本模式。唯一真正的区别是您测量的是 1000 而不是 60。

发生了什么变化：

• 添加了新变量milli
• 将timer 的“频率”更改为 10 毫秒（1 毫秒似乎有点矫枉过正）
• Add 函数执行时，我们将 10 毫秒添加到 milli
• 将毫秒添加到当前显示的末尾

更新

发生了什么变化：

• 在“停止”按钮onclick函数中将t设置为null。
• 将开始按钮的onclick 更改为函数，而不是将其指向timer。现在我们可以检查t，如果它没有值，我们运行计时器。这会阻止对开始按钮的额外点击运行更多计时器，因此我们不会收到对 add 的“额外”调用。
• 在 time 元素中为毫秒添加了“.000”（我在第一个版本中错过了这个）。
• 在“清除”功能的显示值中添加了默认的“.000”（我在第一个版本中错过了这个）。
• 在 clear 函数中添加了milli = 0;（我在第一个版本中错过了这个）。

var h1 = document.getElementsByTagName('h1')[0],
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    milli = 0, seconds = 0, minutes = 0, hours = 0,
    t;

function add() {
    milli += 10;
    if (milli >= 1000) {
        milli = 0;
        seconds++;
        if (seconds >= 60) {
            seconds = 0;
            minutes++;
            if (minutes >= 60) {
                minutes = 0;
                hours++;
            }
        }
    }
    
    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds) + "." + (milli > 90 ? milli : "0" + milli);

    timer();
}
function timer() {
    t = setTimeout(add, 10);
}
timer();


/* Start button */
start.onclick = function() {
    if(!t) timer();
}

/* Stop button */
stop.onclick = function() {
    clearTimeout(t);
    t = null;
}

/* Clear button */
clear.onclick = function() {
    h1.textContent = "00:00:00.000";
    milli = 0; seconds = 0; minutes = 0; hours = 0;
}

<h1><time>00:00:00.000</time></h1>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>