使用 Javascript 创建秒表：点击事件有问题

Question

我目前正在研究这个 Mozilla 开发者网络的项目。 任务是使用日期 object 和一些普通的旧 Javascript 创建一个秒表，事情进展缓慢。

我已经弄清楚了使用 Date.now() 方法显示时间流逝背后的逻辑，并且能够显示成功的时间流逝。 唯一的问题是，这仅在单击 html 元素时发生。 我希望时间流逝可以继续显示在屏幕上，而无需继续单击。

有谁知道我该怎么做？

这是作业的链接： https://github.uconn.edu/pages/ssw19002/dmd-3475/Week-9/stop-watch/stop-watch.html

这是到目前为止的代码：

function displayTime() {
  let date = new Date();
  let time = date.toLocaleTimeString();
  document.querySelector('.clock').textContent = time;
}


const createClock = setInterval(displayTime,1000);


//add click event to start button
let startBtn = document.getElementById("start-button");

startBtn.addEventListener('click', function(){
  document.querySelector('.clock').textContent = setInterval(function startTime(){startTime - Date.now()}, 1000);

  const createClock = setInterval(startTime,1000);
});

Answer 1

这是我为命令行使用而制作的。 也许您可以修改它以供浏览器使用：

function format(d) {
   let mil = String(d % 1000).padStart(3, '0');
   d = Math.trunc(d / 1000);
   let sec = String(d % 60).padStart(2, '0');
   d = Math.trunc(d / 60);
   return String(d) + ' m ' + sec + ' s ' + mil + ' ms';
}

function main() {
   console.clear();
   let s = format(Date.now() - n);
   console.log(s);
}

let n = Date.now();
setInterval(main, 10);

https://89z.github.io/autumn/return-duration-string/js

Answer 2

对于时钟部分来说，前两个定义就足够了。 setInterval将启动一个间隔，每秒调用一次displayTime 。 制作第二个 function displayElapsedTime ，它类似于displayTime ，在startBtn单击处理程序中，停止displayTime间隔（您需要保持setInterval调用的结果才能执行此操作）并启动displayElapsedTime间隔。 与往常一样，请阅读您能找到的有关如何执行此操作的最佳/最官方文档。

您发布的代码有一个错误 - 您命名为startTime的 function 的主体包含对名为startTime的变量的引用 - 然后它将指向 function startTime 。 您似乎将function本身命名为 startTime，而不是命名在 function 中定义的变量。