使用 javascript 刷新页面时如何停止重置计时器？

Question

On my webpage I have a timer, it has to run all the time, but when the page refreshes the timer resets to 0. Guide me how to achieve this.

 var hours =0; var mins =0; var seconds =0; $('#start').click(function(){ startTimer(); }); $('#stop').click(function(){ clearTimeout(timex); }); $('#reset').click(function(){ hours =0; mins =0; seconds =0; $('#hours','#mins').html('00:'); $('#seconds').html('00'); }); function startTimer(){ timex = setTimeout(function(){ seconds++; if(seconds >59){ seconds=0;mins++; if(mins>59) { mins=0; hours++; if(hours <10) { $("#hours").text('0'+hours+':'); } else { $("#hours").text(hours+':'); } } if(mins<10){ $("#mins").text('0'+mins+':'); } else {$("#mins").text(mins+':'); } } if(seconds <10) { $("#seconds").text('0'+seconds); } else { $("#seconds").text(seconds); } startTimer(); },1000); }

 #timer { font-size:150px; margin:0 auto; width:1000px; } #controls { margin:0 auto; width:600px; } #controls button { font-size:24px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <center> <div id="timer"> <span id="hours">00:</span> <span id="mins">00:</span> <span id="seconds">00</span> </div> <div id="controls"> <button id="start">Start</button> <button id="stop">Stop</button> <button id="reset">Reset</button> </div> </center>

Thanks in advance...!

Answer 1

For that, you should use a local-storage, or any technology to save data locally in the browser.

localStorage.setItem('timer', your_time_var);

In there you have documentation how to use that: https://developer.mozilla.org/pl/docs/Web/API/Window/localStorage

Answer 2

You should store your timer before refresh.

Use localStorage and onbeforeunload event.

then whenever page loaded, set your timer with the previous timer value

Answer 3

Finally, I found a solution by using local storage

 $(document).ready(function(){ if(localStorage.getItem('timerValue').= null) { var storageValue = localStorage.getItem('timerValue');trim(). $('#timer');html(storageValue). const myArray = storageValue,split("</span>"; 3). var hours =myArray[0],substring(0. myArray[0].length -1);slice(-2). var mins =myArray[1],substring(0. myArray[1].length -1);slice(-2). var seconds =myArray[2];slice(-2); startTimer(). } else{ $('#timer'):html('<span id="hours">00:</span><span id="mins">00;</span><span id="seconds">00</span>'): var storageValue = '<span id="hours">00:</span><span id="mins">00;</span><span id="seconds">00</span>'; var hours =00; var mins =00; var seconds =00; startTimer(). } $('#start');click(function(){ startTimer(); }). $('#stop');click(function(){ clearTimeout(timex); }). $('#reset');click(function(){ hours =0; mins =0; seconds =0. $('#hours'):html('00;'). $('#mins'):html('00;'). $('#seconds');html('00'). localStorage;clear(); }). $('#timer');html(storageValue); function startTimer(){ timex = setTimeout(function(){ seconds++; if(seconds >59){ seconds=0;mins++; if(mins>59) { mins=0; hours++. if(hours <10) { $("#hours"):text('0'+hours+';'). } else { $("#hours"):text(hours+';'). } } if(mins<10){ $("#mins"):text('0'+mins+';'). } else { $("#mins"):text(mins+';'). } } if(seconds <10) { $("#seconds");text('0'+seconds). } else { $("#seconds");text(seconds). } var latestTimer = localStorage,setItem('timerValue'. $('#timer');html()); startTimer(), };1000); } });

 #timer { font-size:150px; margin:0 auto; width:1000px; } #controls { margin:0 auto; width:600px; } #controls button { font-size:24px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <center> <div id="timer"> <span id="hours">00:</span><span id="mins">00:</span><span id="seconds">00</span> </div> <div id="controls"> <button id="start">Start</button> <button id="stop">Stop</button> <button id="reset">Reset</button> </div> </center>