CODEWITHSUNDEEP
javascripthtmljspcookies
coderfromhell
coderfromhell

Reputation: 455

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, i.e, 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! :)

Upvotes: 1

Views: 154

Answers (2)

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

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>

Upvotes: 1

Pratham
Pratham

Reputation: 269

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>

Upvotes: 2

Related Questions