code:
<div class="readTiming">
<time>00:00:00</time><br/>
</div>
<input type="hidden" name="readTime" id="readTime">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
var p = document.getElementsByClassName('readTiming')[0],
seconds = 0, minutes = 0, hours = 0,
t;
function add() {
seconds++;
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
p.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
timer();
localStorage.setItem("timeStore", p.textContent);
getElementsByClassName('readTiming').innerHTML = localStorage.getItem("timeStore");
$("#readTime").val(p.textContent);
}
function timer() {
t = setTimeout(add, 1000);
}
timer();
</script>
In this code I have a timer. Now, I want if a user refresh page then it will not change and timer time will me continue and if user press on browser back button then it will save the out time. So, How can I do this? Please help me.
Thank You
No doubt by now you have managed to get your code working - on the off-chance that you do not then perhaps this might be of interest. It uses, as the others, localStorage to maintain the current count of elapsed seconds since the script began. The anonymous self executing functions act like setInterval or a recursive setTimeout - on each iteration the elapsed time is displayed according to the format laid out in the format function and the new value saved to storage.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Timer with page refresh</title>
</head>
<body>
<div class='readTiming'>
<time>00:00:00</time>
</div>
<script>
(function(){
function format( time ){
var h = ~~( time / 3600 );
var m = ~~( ( time % 3600 ) / 60 );
var s = time % 60;
return pad( h ) + ':' + pad( m ) + ':' + pad( s );
}
function pad( i ){ return ( parseInt( i ) < 10 ) ? '0' + parseInt( i ) : parseInt( i ) }
const TIMERNAME='continuous_timer';
(function(){
if( !localStorage.getItem( TIMERNAME ) )localStorage.setItem( TIMERNAME, 0 );
var _time=parseInt( localStorage.getItem( TIMERNAME ) );
_time++;
localStorage.setItem( TIMERNAME, _time );
document.querySelector('.readTiming time').textContent = format( _time );
setTimeout( arguments.callee, 1000 );
})()
})();
</script>
</body>
</html>