countdown timer reloading again on refreshing

问题

countdown timer code in javascript. But it is restarting again when the page is refreshed. I want the timer should continue even though it is restarted.

Help me to deal with this problem as i am beginner this is my first application i need some detail inputs from you.

`
<body>
<div id="divCounter"></div>
<script type="text/javascript">

var hoursleft = 0;
var minutesleft = 35;           // you can change these values to any value greater than 0
var secondsleft = 0;

var finishedtext = "Countdown finished!" // text that appears when the countdown reaches 0
var end = new Date();

end.setMinutes(end.getMinutes()+minutesleft);
end.setSeconds(end.getSeconds()+secondsleft);


if(localStorage.getItem("counter")){

    var value = localStorage.getItem("counter");

}else{
  var value = 0;
}


var counter = function (){


    var now = new Date();
var diff = end - now;
diff = new Date(diff);

var sec = diff.getSeconds();
var min = diff.getMinutes();

if (min < 10){
    min = "0" + min;
}
if (sec < 10){
    sec = "0" + sec;
}

if(now >= end){
    clearTimeout(timerID);
    document.getElementById('divCounter').innerHTML = finishedtext;
}
else{
    var value = min + ":" + sec;
//document.getElementById('divCounter').innerHTML = min + ":" + sec;
localStorage.setItem("counter", JSON.stringify(value));
}      

 // timerID = setTimeout("cd()", 1000);
// value = JSON.parse(localStorage.getItem("counter"));
//$('#divCounter').append(value);
document.getElementById('divCounter').innerHTML = value; 
 }





 var interval = setInterval(function (){counter();}, 1000);
 </script>
 </body>
 `

回答1:

countdown timer for whatever time you want. It does not restart when you refresh the page.

<body>
<div id="divCounter"></div>


<script>
//var hoursleft = 0;
var minutesleft = 0; //give minutes you wish
var secondsleft = 30; // give seconds you wish
var finishedtext = "Countdown finished!";
var end1;
if(localStorage.getItem("end1")) {
end1 = new Date(localStorage.getItem("end1"));
} else {
end1 = new Date();
end1.setMinutes(end1.getMinutes()+minutesleft);
end1.setSeconds(end1.getSeconds()+secondsleft);

}
var counter = function () {
var now = new Date();
var diff = end1 - now;

diff = new Date(diff);

var milliseconds = parseInt((diff%1000)/100)
    var sec = parseInt((diff/1000)%60)
    var mins = parseInt((diff/(1000*60))%60)
    //var hours = parseInt((diff/(1000*60*60))%24);

if (mins < 10) {
    mins = "0" + mins;
}
if (sec < 10) { 
    sec = "0" + sec;
}     
if(now >= end1) {     
    clearTimeout(interval);
   // localStorage.setItem("end", null);
     localStorage.removeItem("end1");
     localStorage.clear();
    document.getElementById('divCounter').innerHTML = finishedtext;
     if(confirm("TIME UP!"))
     window.location.href= "timeup.php";
} else {
    var value = mins + ":" + sec;
    localStorage.setItem("end1", end1);
    document.getElementById('divCounter').innerHTML = value;
}
}
var interval = setInterval(counter, 1000);
</script>
</body>

回答2:

You need to store the timers value a cookie,

after refreshing, check if the cookie is set, if it is, get the value and set it as the initial time of your timer, else start from 0

回答3:

What you want to do here is set the date / time to countdown to and get the current user's date / time and then workout the difference to countdown from.

Something like the following will help push you in the right direction:

var date  = new Date(Date.UTC(2015, 5, 28, 12, 0, 0));
var now   = new Date();
var diff  = date.getTime()/1000 - now.getTime()/1000;

回答4:

Although you're reading in the value variable from local storage, you're not actually setting the end and now time to their old values, thus they are getting reset, also resetting the value variable. You should also store those values in memory, and load them when you refresh the page.

回答5:

Here's the finished, fully functional, optimised code. It should work now!

<body>
<div id="divCounter"></div>
<script>
var hoursleft = 0;
var minutesleft = 35;
var secondsleft = 0; 
var finishedtext = "Countdown finished!";
var end;
if(localStorage.getItem("end")) {
    end = new Date(localStorage.getItem("end"));
} else {
    end = new Date();
    end.setMinutes(end.getMinutes()+minutesleft);
    end.setSeconds(end.getSeconds()+secondsleft);
}
var counter = function () {
    var now = new Date();
    var diff = end - now;
    diff = new Date(diff);
    var sec = diff.getSeconds();
    var min = diff.getMinutes(); 
    if (min < 10) {
        min = "0" + min;
    }
    if (sec < 10) { 
        sec = "0" + sec;
    }     
    if(now >= end) {     
        clearTimeout(interval);
        localStorage.setItem("end", null)
        document.getElementById('divCounter').innerHTML = finishedtext;
    } else {
        var value = min + ":" + sec;
        localStorage.setItem("end", end);
        document.getElementById('divCounter').innerHTML = value;
    }
}
var interval = setInterval(counter, 1000);
</script>
</body>

来源：https://stackoverflow.com/questions/30498312/countdown-timer-reloading-again-on-refreshing

标签

javascript

php

web-applications

countdowntimer

web-application-design