countdown timer

ahmed1234550 · 02/12/2018, 17:35

how to make the countdown stop when the time is over, it keeps going in -
also how to make it show text or img when its over

Code:

function myTimer() {
  var ending = jQuery("#timer").attr("data-endtime"),
      endTime = new Date(ending);
  endTime = Date.parse(endTime) / 1000;

  var now = new Date();
  now = Date.parse(now) / 1000;

  var timeLeft = endTime - now;

  var days = Math.floor(timeLeft / 86400);
  var hours = Math.floor((timeLeft - days * 86400) / 3600);
  var minutes = Math.floor((timeLeft - days * 86400 - hours * 3600) / 60);
  var seconds = Math.floor(
    timeLeft - days * 86400 - hours * 3600 - minutes * 60
  );

  if (days < "10") {
    days = "0" + days;
  }
  if (hours < "10") {
    hours = "0" + hours;
  }
  if (minutes < "10") {
    minutes = "0" + minutes;
  }
  if (seconds < "10") {
    seconds = "0" + seconds;
  }

  $("#timer").html(
    "<span id='days'>" +
    days +
    "<span>Days</span></span>" +
    "<span id='hours'>" +
    hours +
    "<span>Hrs</span></span>" +
    "<span id='minutes'>" +
    minutes +
    "<span>Mins</span></span>" +
    "<span id='seconds'>" +
    seconds +
    "<span>Secs</span></span>"
  );
}

setInterval(function() {
  myTimer();
}, 1000);

HTML:

Code:

<div id="timer" data-endtime="10 8eptember 2019 9:56:00 GMT+01:00"></div>

iMostLiked · 02/12/2018, 22:59

setInterval() returns an id, which you can use for clearInterval()

Do it like this:

Code:

var intervalID = 0;

function myTimer() { .. }

intervalID = setInterval(function() {
  myTimer();
}, 1000);

Then you add this in your myTimer() function at the bottom:

Code:

if (timeLeft <= 0){ // when time is 0 or below
    $("#timer").html("Finished!"); // shows text when finished
    clearInterval(intervalID); // stops timer
}

Full code:

Spoiler

type. · 02/13/2018, 17:15

Quote:

Originally Posted by ahmed1234550

Code:

  if (days < "10") { days = "0" + days; }
  if (hours < "10") { hours = "0" + hours; }
  if (minutes < "10") { minutes = "0" + minutes; }
  if (seconds < "10") { seconds = "0" + seconds; }

Shouldn't it be < "1" instead of < "10" ?
But as far as behaviour goes the solution from iMostLiked works fine. (:

ahmed1234550 · 02/13/2018, 22:29

Quote:

Originally Posted by iMostLiked

setInterval() returns an id, which you can use for clearInterval()

Do it like this:

Code:

var intervalID = 0;

function myTimer() { .. }

intervalID = setInterval(function() {
  myTimer();
}, 1000);

Then you add this in your myTimer() function at the bottom:

Code:

if (timeLeft <= 0){ // when time is 0 or below
    $("#timer").html("Finished!"); // shows text when finished
    clearInterval(intervalID); // stops timer
}

Full code:

Spoiler

thank you so much

Serraniel · 02/14/2018, 12:59

#Closed