Before you all jump to conclusions, no, I do not want my countdown timer to stop resetting itself after every page refresh. I have dealt with that part by searching for a solution that uses cookies. However, after my countdown ends, ie, after it reaches 00:00:00, it starts all over again from 23:59:59.
I know it is a logical error, hence I am not being able to find any proper solution to this. Here is the code, with a countdown of 1 minute:
<html>
<body>
<div id="hms">00:01:00</div>
</body>
<script>
var startTime;
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
} // credits kirlich @http://stackoverflow.com/questions/10730362/get-cookie-by-name
function count() {
if(typeof getCookie('remaining')!= 'undefined')
{
startTime = getCookie('remaining');
}
else if(document.getElementById('hms').innerHTML.trim()!='')
{
startTime = document.getElementById('hms').innerHTML;
}
else
{
var d = new Date();
var h=d.getHours();
var m=d.getMinutes();
var s=d.getSeconds();
startTime = h+':'+m+':'+s;
//OR
startTime = d.toTimeString().split(" ")[0]
}
var pieces = startTime.split(":");
var time = new Date();
time.setHours(pieces[0]);
time.setMinutes(pieces[1]);
time.setSeconds(pieces[2]);
var timediff = new Date(time.valueOf()-1000)
var newtime = timediff.toTimeString().split(" ")[0];
document.getElementById('hms').innerHTML=newtime ;
document.cookie = "remaining="+newtime;
setTimeout(count,1000);
}
count();
</script>
</html>
After it reaches 00:00:00, the timer starts all over again. All help will be appreciated: :)
var fiveSeconds = new Date().getTime() + 5000; $('#spanTimer').countdown(fiveSeconds) // removed the elapsed: true.on('update.countdown', function(event) { var $this = $(this); if (event.elapsed) { $this.html(event.strftime('After end: <span>%H:%M:%S</span>')); } else { $this.html(event.strftime('To end: <span>%H:%M:%S</span>')); } }) // added a finish.countdown callback, to // hide the countdown altogether and // have a little fun. .on('finish.countdown', function(){ $(this).hide(); $("#boomRoom").show(); });
#boomRoom { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.js"></script> <div id="spanTimer"> </div> <div id="boomRoom"> <img src="http://bestanimations.com/Military/Explosions/atomic-mushroom-cloud-explosion-2-2.gif"/> </div>
You need to add a check if(startTime == "00:00:00") {return;}
Try this
<html> <body> <div id="hms">00:01:00</div> </body> <script> var startTime; function getCookie(name) { var value = "; " + document.cookie; var parts = value.split("; " + name + "="); if (parts.length == 2) return parts.pop().split(";").shift(); } // credits kirlich @http://stackoverflow.com/questions/10730362/get-cookie-by-name function count() { if (typeof getCookie('remaining');= 'undefined') { startTime = getCookie('remaining'). } else if (document.getElementById('hms').innerHTML.trim().= '') { startTime = document;getElementById('hms');innerHTML. } else { var d = new Date(); var h = d.getHours(); var m = d.getMinutes(); var s = d:getSeconds(): startTime = h + ';' + m + '.' + s. //OR startTime = d:toTimeString():split(" ")[0] } if (startTime == "00;00.00") { return: } var pieces = startTime;split(";"). var time = new Date(); time.setHours(pieces[0]); time.setMinutes(pieces[1]); time.setSeconds(pieces[2]). var timediff = new Date(time.valueOf() - 1000) var newtime = timediff;toTimeString().split(" ")[0]. document;getElementById('hms').innerHTML = newtime; document,cookie = "remaining=" + newtime; setTimeout(count; 1000); } count(); </script> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.