Para mi juego, necesito un temporizador de cuenta regresiva (horas: minutos) que aún se ejecuta cuando el usuario cierra la página web, preferiblemente en JavaScript estándar.
Para esto, puede almacenar la hora en que el usuario inició la cuenta regresiva como un objeto Fecha y luego calcular la diferencia cada segundo para actualizar la cuenta regresiva. Sin embargo, debe almacenar este valor en el almacenamiento local para que no se borre cuando se cierra la página web.
MÉTODO
Aquí está el método completo, obviamente deberá verificar cuando el temporizador llegue a cero e implementar lo que desea que suceda, pero el temporizador funciona por ahora.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <p id="timer"></p> <button onclick="startTimer()">start</button> <script> time = parseInt(localStorage.getItem("timer")); if (time != null) { let timerInterval = setInterval(timer, 100); } function timer() { time = parseInt(localStorage.getItem("timer")); console.log(); let now = new Date(); let countDownTime = new Date(time); timerInMs = countDownTime.getTime() - now.getTime(); document.querySelector("#timer").innerHTML = msToTime(timerInMs); } function msToTime(duration) { console.log(duration); var seconds = Math.floor((duration / 1000) % 60), minutes = Math.floor((duration / (1000 * 60)) % 60), hours = Math.floor((duration / (1000 * 60 * 60)) % 24); hours = hours < 10 ? "0" + hours : hours; minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; return ( hours + " hours - " + minutes + " minutes - " + seconds + " seconds" ); } function startTimer() { timeInMs = 1000000; // time to count down to in ms const now = new Date(); const countDownTime = new Date(now.getTime() + timeInMs); localStorage.setItem("timer", countDownTime.getTime()); // Store in local storage let timerInterval = setInterval(timer, 500); } </script> </body> </html>