简体   繁体   中英

How to stop countdown timer from refreshing itself after countdown ends

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM