簡體   English   中英

如何在 Javascript 中創建秒表單圈時間 function

[英]How to create a stopwatch lap time function in Javascript

我正在嘗試創建一個顯示單圈時間的秒表應用程序。 目前我讓它顯示點擊圈按鈕的時間。 但是,我想顯示時間 a 和時間 b、時間 b 和時間 c 等之間的差異。

誰能建議一種方法來做到這一點?

我查看了各種博客和堆棧溢出的不同響應,但還沒有找到一個我完全理解的響應。 所以我不想只是復制代碼。

我已經包含了我認為與問題相關的代碼片段。

 const timer = document.getElementById("stopwatch"); const startButton = document.getElementById("startButton"); let lapNumber = 0; let [hour, min, sec, centisecond] = [0, 0, 0, 0]; let stopTime = true; let [lapHour, lapMin, lapSec, lapCentiSec] = [0, 0, 0, 0]; function startTimer() { if (startButton.innerText === "Start") { startButton.innerText = "Stop"; stopTime = false; timerCycle(); } else if (startButton.innerText === "Stop") { startButton.innerText = "Start"; stopTime = true; } } function timerCycle() { if (stopTime === false) { // Set timings to numbers centisecond = parseInt(centisecond); sec = parseInt(sec); min = parseInt(min); hour = parseInt(hour); centisecond = centisecond + 1; if (centisecond == 100) { sec = sec + 1; centisecond = 0; } if (sec === 60) { min = min + 1; sec = 0; } if (min === 60) { hour = hour + 1; min = 0; sec = 0; } if (centisecond < 10 || centisecond === 0) { centisecond = "0" + centisecond; } if (sec < 10 || sec === 0) { sec = "0" + sec; } if (min < 10 || min === 0) { min = "0" + min; } if (hour < 10 || hour === 0) { hour = "0" + hour; } timer.innerHTML = `${hour}:${min}:${sec}:${centisecond}`; setTimeout("timerCycle()", 10); } } function lapTime() { lapNumber++; const lapTimes = `${lapNumber}: ${timer.innerHTML}`; setLocalStorage("laps", lapTimes); } function setLocalStorage(key, data) { const lapTimes = JSON.parse(localStorage.getItem(key)) || []; lapTimes.push(data); localStorage.setItem(key, JSON.stringify(lapTimes)); displayLaps(lapTimes); } function displayLaps(lapTimes) { const lapContainer = document.querySelector("#lapList"); const laps = document.createElement("li"); laps.className = "lap-time"; if (timer.innerHTML === "00:00:00:00") { laps.innerHTML = "Please press start."; lapContainer.appendChild(laps); return; } else { const pressStart = Array.from(document.getElementsByClassName("lap-time")); pressStart.forEach((text) => { if (text.innerHTML === "Please press start.") { text.remove(); } }); } lapTimes.forEach((lapTime) => { laps.innerHTML = lapTime; }); lapContainer.appendChild(laps); }

不要打擾所有這些厘秒等。只需單擊“開始”時獲取當前時間的毫秒數

let d = new Date();
let start_ms = d.valueOf();

然后在單擊“停止”時再次執行相同操作,並減去這些值以找到經過的毫秒。 然后轉換為用戶可讀的小時、分鍾和秒。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM