if(localStorage.getItem("total_seconds")){ var total_seconds = localStorage.getItem("total_seconds"); } else { var total_seconds = 10*10; } var minutes = parseInt(total_seconds/60); var seconds = parseInt(total_seconds%60); function countDownTimer(){ if(seconds < 10){ seconds= "0"+ seconds ; } if(minutes < 10){ minutes= "0"+ minutes ; } document.getElementById("timer").innerHTML = "Result after: "+minutes+" minutes "+seconds+" seconds"; if(total_seconds <= 0){ setTimeout("document.quiz.submit()" ,1); document.getElementById("timer").innerHTML = ""; localStorage.removeItem("total_seconds"); } else { total_seconds = total_seconds -1 ; minutes = parseInt(total_seconds/60); seconds = parseInt(total_seconds%60); localStorage.setItem("total_seconds",total_seconds) setTimeout("countDownTimer()" ,1000); } }setTimeout("countDownTimer()" ,1000);
Arriba está el código que estoy usando para la cuenta regresiva usando el almacenamiento local, pero no cuenta regresivamente y se reanuda donde el usuario se fue si el sitio/navegador está cerrado. t en el sitio o ha cerrado su navegador.
Su código solo se ejecuta mientras el navegador del cliente está abierto. Si su secuencia de comandos debe verse y comportarse de la forma en que lo hace su código actual, necesitará un servidor. Sin embargo, podemos hacer uso del objeto Fecha incorporado en JavaScript para detectar cuánto tiempo ha pasado desde la creación del temporizador:
const DEFAULT_TIMER_DURATION = 10; // In seconds. // Here, we get the status of the currently-active timer: let totalSeconds = parseInt(localStorage.getItem("total_seconds")); let startDate = parseInt(localStorage.getItem("start_date")); if(!(totalSeconds && startDate)) { // If there isn't an active timer, set one up: localStorage.setItem("total_seconds", DEFAULT_TIMER_DURATION); localStorage.setItem("start_date", new Date().getTime()); totalSeconds = DEFAULT_TIMER_DURATION; startDate = new Date().getTime(); console.log("Reset timer:", DEFAULT_TIMER_DURATION); } // This function updates the timer and displays the countdown: function displayElapsedSecond(timerData) { if(timerData.secondsLeft <= 0) { console.log("Time is up!"); localStorage.removeItem("total_seconds"); localStorage.removeItem("start_date"); return; } if(timerData.initialDelay) { setTimeout(() => { displayElapsedSecond({secondsLeft: timerData.secondsLeft}); }, initialDelay); return; } timerData.secondsLeft--; console.log("Seconds left:", timerData.secondsLeft); setTimeout(() => { displayElapsedSecond({secondsLeft: timerData.secondsLeft}); }, 1000); } // this block of code calculates how long has passed and continues counting down from wherever the user left of: const now = new Date().getTime(); const secondsPassed = (now - startDate) / 1000; let secondsLeft = totalSeconds - secondsPassed; const initialDelay = Math.ceil(secondsLeft) - secondsLeft; secondsLeft = Math.ceil(secondsLeft); displayElapsedSecond({initialDelay, secondsLeft}); // Obviously some improvements can be made for time complexity, but the code nicely illustrates the way this timer works