无法在 Javascript 中使用 setHours() 将时间设置为 00:00:00:00

Question

我一直在尝试将时间设置为 00:00:00:00 。 但 setInterval() 停止工作。

 document.getElementById("start").addEventListener("click", function () { setInterval(function () { let myDate = new Date(); myDate.setHours(0, 0, 0); let a = myDate.getHours(); let b = myDate.getMinutes(); let c = myDate.getSeconds(); document.getElementById("counter").innerHTML = `${a}:${b}:${c}`; }, 1000); });

 <h2 id="counter"></h2> <button id="start">Start</button> <button id="reset">Reset</button> <button id="pause">Pause</button>

.

Answer 1

如果您查看有关setHours MDN 文档，您会看到它：

...返回自 UTC 时间 1970 年 1 月 1 日 00:00:00 到更新的 Date 实例表示的时间之间的毫秒数。

myDate将具有更新的日期/时间，但myTime只是该纪元以来的毫秒值。

如果您想要字符串"00:00:00:00" ，则必须自己创建它（尽管在您的示例中，它只是一个文字，因为它没有任何变化）。 我不清楚最后的:00应该是什么（通常是.000毫秒），但是您可以使用getHours 、 getMinutes等获取日期的各个部分，并构建您想要的字符串。

Answer 2

这是因为正在返回时间戳。

您可以在此处找到对此进行解释的文档。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setHours

在这里你可以找到一个很好的例子，说明如何将时间戳转换为可读日期

在 JavaScript 中将 Unix 时间戳转换为时间

Answer 3

而不是调用myDate.setHours(0, 0, 0, 0) ，你应该调用let myDate = new Date(0) ; 但是您真正需要做的是从计时器开始的时间中减去当前时间。

如果要使其可重用，请将其包装在一个类中。 此外，您需要考虑暂停时的停工时间。

这是一个将时间、任务和 UI 解耦的示例。 每个秒表都是相互独立的。

更新：添加了一些主题的更多比萨。

 /** * The Stopwatch class is based on: * https://olinations.medium.com/an-accurate-vanilla-js-stopwatch-script-56ceb5c6f45b */ class Stopwatch { constructor(task, updateRate = 10) { this.startTime = 0; this.updatedTime = 0; this.difference = 0; this.savedTime = 0; this.paused = false; this.running = false; this.tInterval = null; this.task = task; this.updateRate = updateRate; } update() { this.updatedTime = new Date().getTime(); if (this.savedTime) { this.difference = (this.updatedTime - this.startTime) + this.savedTime; } else { this.difference = this.updatedTime - this.startTime; } this.task(this.difference); } start() { if (!this.running) { this.startTime = new Date().getTime(); this.tInterval = setInterval(() => this.update(), this.updateRate); this.paused = false; this.running = true; } } pause() { if (!this.difference) { // If timer never started, disallow pause button } else if (!this.paused) { clearInterval(this.tInterval); this.savedTime = this.difference; this.paused = true; this.running = false; } else { // this.start(); // Optional if Start/Pause is toggleable } } reset() { clearInterval(this.tInterval); this.tInterval = null; this.savedTime = 0; this.difference = 0; this.paused = false; this.running = false; this.task(this.difference); } } const formatTime = (ms) => { let hrs = Math.floor(ms / 36e5), min = Math.floor((ms - (hrs * 36e5)) / 6e4), sec = Math.floor((ms - (hrs * 36e5) - (min * 6e4)) / 1e3), mil = Math.floor((ms - (hrs * 36e5) - (min * 6e4) - (sec * 1e3))); hrs = `${hrs}`.padStart(2, '0'); min = `${min}`.padStart(2, '0'); sec = `${sec}`.padStart(2, '0'); mil = `${mil}`.padStart(3, '0'); return `${hrs}:${min}:${sec}.${mil}`; } // Link an internal stopwatch to a UI component. const LinkStopwatchUI = (stopwatchEl) => { const displayEl = stopwatchEl.querySelector('.display'), startBtn = stopwatchEl.querySelector('.start-btn'), pauseBtn = stopwatchEl.querySelector('.pause-btn'), resetBtn = stopwatchEl.querySelector('.reset-btn'); const task = timeDiff => { displayEl.innerHTML = formatTime(timeDiff) }; const stopwatch = new Stopwatch(task); stopwatch.reset(); startBtn.addEventListener('click', () => stopwatch.start()); pauseBtn.addEventListener('click', () => stopwatch.pause()); resetBtn.addEventListener('click', () => stopwatch.reset()); } document.querySelectorAll('.stopwatch').forEach(LinkStopwatchUI);

 :root { --sw-bg: #444; --sw-fg: #0F7; --sw-bc: #666; --sw-display-bg: #222; --sw-display-bc: #000; --sw-btn-bg: #555; --sw-btn-fg: #EEE; --sw-btn-bc: #666; --sw-btn-hover-bg: #777; --sw-btn-hover-fg: #FFF; } .stopwatch[data-theme="light"] { --sw-bg: #EEE; --sw-fg: #06D; --sw-bc: #666; --sw-display-bg: #CCC; --sw-display-bc: #AAA; --sw-btn-bg: #E7E7E7; --sw-btn-fg: #111; --sw-btn-bc: #AAA; --sw-btn-hover-bg: #FFF; --sw-btn-hover-fg: #000; } /* https://www.color-hex.com/color-palette/52138 */ .stopwatch[data-theme="calm"] { --sw-bg: #F5F0EC; --sw-fg: #152C43; --sw-bc: #72808E; --sw-display-bg: #BDDAC8; --sw-display-bc: #DED0C2; --sw-btn-bg: #DED0C2; --sw-btn-fg: #152C43; --sw-btn-bc: #72808E; --sw-btn-hover-bg: #BDDAC8; --sw-btn-hover-fg: #152C43; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; flex-direction: row; justify-content: space-around; align-items: center; background: #111; } .stopwatch { display: grid; grid-template-columns: repeat(3, 1fr); grid-row-gap: 0.5em; grid-column-gap: 0.33em; padding: 0.25em; color: var(--sw-fg); background: var(--sw-bg); border: thin solid var(--sw-bc); } .stopwatch button { background: var(--sw-btn-bg); color: var(--sw-btn-fg); border: thin solid var(--sw-btn-bc); } .stopwatch button:hover { background: var(--sw-btn-hover-bg); color: var(--sw-btn-hover-fg); cursor: pointer; } .stopwatch .display { grid-column: 1 / 4; grid-row: 1; text-align: right; background: var(--sw-display-bg); border: thin solid var(--sw-display-bc); font-family: monospace; font-size: 1.667em; padding: 0.125em; } .stopwatch .start-btn { grid-column: 1; grid-row: 2; } .stopwatch .stop-btn { grid-column: 2; grid-row: 2; } .stopwatch .reset-btn { grid-column: 3; grid-row: 2; }

 <div class="stopwatch"> <div class="display"></div> <button class="start-btn">Start</button> <button class="pause-btn">Pause</button> <button class="reset-btn">Reset</button> </div> <div class="stopwatch" data-theme="light"> <div class="display"></div> <button class="start-btn">Start</button> <button class="pause-btn">Pause</button> <button class="reset-btn">Reset</button> </div> <div class="stopwatch" data-theme="calm"> <div class="display"></div> <button class="start-btn">Start</button> <button class="pause-btn">Pause</button> <button class="reset-btn">Reset</button> </div>