Tengo un cronómetro que funciona. Cuando hago clic en el botón de inicio, el cronómetro se inicia y cuando hago clic en el botón de pausa, el cronómetro se detiene. Lo que me gustaría es cuando actualice mi navegador para mantener la hora actual del cronómetro y continuar desde allí con la misma funcionalidad. O cuando hago eco del tiempo del cronómetro desde una base de datos para continuar desde el momento exacto en que estaba antes de guardarlo.
let showTime = document.querySelector("#output"); let startTimeButton = document.querySelector("#start") let pauseTimeButton = document.querySelector("#pause") pauseTimeButton.style.display = "none"; let seconds = 0; let interval = null; const timer = () => { seconds++; // Get hours let hours = Math.floor(seconds / 3600); // Get minutes let minutes = Math.floor((seconds - hours * 3600) / 60); // Get seconds let secs = Math.floor(seconds % 60); if (hours < 10) { hours = `0${hours}`; } if (minutes < 10) { minutes = `0${minutes}`; } if (secs < 10) { secs = `0${secs}`; } showTime.innerHTML = `${hours}:${minutes}:${secs}`; }; startTimeButton.addEventListener("click", () => { pauseTimeButton.style.display = "block"; startTimeButton.style.display = "none"; console.log("START TIME CLICKED"); if (interval) { return; } interval = setInterval(timer, 1000); }); // Pause function pauseTimeButton.addEventListener("click", () => { pauseTimeButton.style.display = "none"; startTimeButton.style.display = "block"; console.log("PAUSE TIME CLICKED"); clearInterval(interval); interval = null; }); <button id="start">Start</button> <button id="pause">Pause</button> <div id="output"></div>Podrías usar localStorage .
Para guardar cada segundo que pasa, puede modificar su función de timer para guardar en localStorage :
let seconds = 0; if (localStorage.getItem("stopwatchSeconds") != null) { seconds = parseInt(localStorage.getItem("stopwatchSeconds")); } //... const timer = () => { //... seconds++; localStorage.setItem("stopwatchSeconds", seconds); //... }; //...Espero que esto ayude.
Parece que lo que estás buscando es localStorage . Almacena los datos de su cronómetro, como startAt , totalSeconds en el almacenamiento y cuando actualiza la página puede restaurar el estado de su cronómetro en función de los datos guardados: remainingTime = (startAt + totalSeconds) - currentTime
Documentos de almacenamiento local: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage#storing_simple_data_%E2%80%94_web_storage