CODEWITHSUNDEEP
javascript
surazzarus
surazzarus

Reputation: 792

Stop the countdown after it reachs the exact date

I have a countdown until Christmas. But I am not able to make this countdown stops after it reaches the exact date. 

function countdown(){
	var now = new Date();
	var eventDate = new Date(2016, 11, 25);

	var currentTime = now.getTime();
	var eventTime = eventDate.getTime();

	// remaining time in miliseconds
	var remTime = eventTime - currentTime;

	// converting into seconds, minutes, hours, days
	var s = Math.floor(remTime / 1000);
	var m = Math.floor(s / 60);
	var h = Math.floor(m / 60);
	var d = Math.floor(h / 24);


	// finding exact hours, minutes and seconds
	h %= 24;
	m %= 60;
	s %= 60;

	
	d = (d < 10) ? "0" + d : d;
	h = (h < 10) ? "0" + h : h;
	m = (m < 10) ? "0" + m : m;
	s = (s < 10) ? "0" + s : s;

	document.getElementById("days").innerHTML = d;
	document.getElementById("hours").innerHTML = h;
	document.getElementById("minutes").innerHTML = m;
	document.getElementById("seconds").innerHTML = s;

	setInterval(countdown, 1000);
}



countdown();
body {
	background: #1f262e;
}

.countdownContainer{
	position: absolute;;
	top: 50%;
	left: 50%;
	transform : translateX(-50%) translateY(-50%);
	text-align: center;
	color: #eff0f2;
	padding: 10px;
}

.info {
	font-size: 80px;
}

#days, #hours, #minutes, #seconds {
	background: #0F1A20;
	box-shadow: 0 0 5px 3px #1f262e;
	font-size: 120px;
	padding: 20px;
}

.title {
	font-size: 20px;
}
<table class="countdownContainer"  cellspacing="10">

	<tr class="title">
		<td style="padding-bottom: 20px">DAYS</td>
		<td style="padding-bottom: 20px">HOURS</td>
		<td style="padding-bottom: 20px">MINUTES</td>
		<td style="padding-bottom: 20px">SECONDS</td>
	</tr>

	<tr class="info" >
		<td id="days" border-spacing="10px"></td>
		<td id="hours"></td>
		<td id="minutes"></td>
		<td id="seconds"></td>
	</tr>
	
</table>

I looked at some examples and they are using clearInterval, but i am not sure how am i able to use it here.

Thanks

Upvotes: 0

Views: 90

Answers (4)

Vinay
Vinay

Reputation: 7674

It's a simple problem , here are some suggestions

  1. Use setTimeout() instead of setInterval() because the former is a one-time event whereas the latter isn't so your set'ed intervals will keep on accumulating over and over , every second one additional is getting added untill browser gets overloaded or crash ? Well idk (browsers are pretty smart these days) but still clearing that enormous mess would require a huge army of clearInterval()s but did you note down the unique identifier for each setInterval() ? Oh no....

  2. At each call eventTime and currentTime are being calculated (they are essentially unix timestamp in millisecs.) so even though former stays the same throughout the run , you would see the latter increase by 1000 upon each call , eventually a time comes when the latter equals/surpasses the former this is where you stop the process.

https://jsfiddle.net/oq2g7h0L/

Upvotes: 1

Yan Mayatskiy
Yan Mayatskiy

Reputation: 353

You don't check if the dates are equal.

If today is the wanted date, then you should stop the interval from running.

interval runs your function every milliseconds you give him as the second argument, so your function will run every second. 

var myInterval = setInterval(countdown, 1000);

function countdown(){
    var now = new Date();
    var eventDate = new Date(2016, 11, 25);

    var currentTime = now.getTime();
    var eventTime = eventDate.getTime();

    // if today is equal Christmas date stop everything
    if (currentTime == eventTime) {
      return clearInterval(myInterval);
    }

    // remaining time in miliseconds
    var remTime = eventTime - currentTime;

    // converting into seconds, minutes, hours, days
    var s = Math.floor(remTime / 1000);
    var m = Math.floor(s / 60);
    var h = Math.floor(m / 60);
    var d = Math.floor(h / 24);


    // finding exact hours, minutes and seconds
    h %= 24;
    m %= 60;
    s %= 60;


    d = (d < 10) ? "0" + d : d;
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;

    document.getElementById("days").innerHTML = d;
    document.getElementById("hours").innerHTML = h;
    document.getElementById("minutes").innerHTML = m;
    document.getElementById("seconds").innerHTML = s;

}

Upvotes: 0

Mojo Allmighty
Mojo Allmighty

Reputation: 793

Try using clearTimeout.

var count;
function countdown() {
 count = setTimeout('decrement()', 1000);
}

clearTimeout(count);

Upvotes: 0

Bhavana
Bhavana

Reputation: 1054

You can use clearInterval like this

var myVar = setInterval(countdown, 1000);

function myStopFunction() {
  clearInterval(myVar);
}

Upvotes: 0

Related Questions