使用 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 中定義的變量。