Cease the countdown once it reaches the specified date

Question

Cease the countdown once it reaches the specified date

I am currently running a Christmas countdown on my website, but I'm struggling to make it stop once the exact date is reached.

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 have searched for solutions online, and many suggest using clearInterval, but I am unsure how to implement it in this context.

Thank you

javascript

Answer 1

Answer №1

This issue may appear simple, but there are some helpful suggestions to consider:

Consider using setTimeout() over setInterval(). While the former is a one-time event, the latter can lead to intervals accumulating continuously. This could result in browser overload or crashing if not managed properly. Remember to keep track of unique identifiers for each setInterval().
During each call, calculate the values of eventTime and currentTime (both are Unix timestamps in milliseconds). While eventTime remains constant, currentTime will increase by 1000 with each call. Once currentTime surpasses or equals eventTime, it's time to halt the process.

Visit this link for an example.

Answer 2

This issue may appear simple, but there are some helpful suggestions to consider:

Consider using setTimeout() over setInterval(). While the former is a one-time event, the latter can lead to intervals accumulating continuously. This could result in browser overload or crashing if not managed properly. Remember to keep track of unique identifiers for each setInterval().
During each call, calculate the values of eventTime and currentTime (both are Unix timestamps in milliseconds). While eventTime remains constant, currentTime will increase by 1000 with each call. Once currentTime surpasses or equals eventTime, it's time to halt the process.

Visit this link for an example.

Answer 3

Answer №2

To stop the countdown, simply use the clearInterval method as shown below:

var countdownTimer = setInterval(countdown, 1000);

function stopCountdown() {
  clearInterval(countdownTimer);
}

Answer 4

To stop the countdown, simply use the clearInterval method as shown below:

var countdownTimer = setInterval(countdown, 1000);

function stopCountdown() {
  clearInterval(countdownTimer);
}

Answer 5

Answer №3

Consider utilizing the clearTimeout method.

let timer;
function initiateCountdown() {
 timer = setTimeout('reduceTime()', 1000);
}

clearTimeout(timer);

Answer 6

Consider utilizing the clearTimeout method.

let timer;
function initiateCountdown() {
 timer = setTimeout('reduceTime()', 1000);
}

clearTimeout(timer);

Answer 7

Answer №4

It is important to ensure that the dates are being compared properly.

If today happens to be the target date, then it would be wise to halt the interval execution.

The interval function will execute your specified function every milliseconds you specify as the second parameter, essentially running it 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 matches Christmas date, stop the interval
    if (currentTime == eventTime) {
      return clearInterval(myInterval);
    }

    // calculate remaining time in milliseconds
    var remTime = eventTime - currentTime;

    // convert 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);


    // determine 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;

}

Answer 8

It is important to ensure that the dates are being compared properly.

If today happens to be the target date, then it would be wise to halt the interval execution.

The interval function will execute your specified function every milliseconds you specify as the second parameter, essentially running it 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 matches Christmas date, stop the interval
    if (currentTime == eventTime) {
      return clearInterval(myInterval);
    }

    // calculate remaining time in milliseconds
    var remTime = eventTime - currentTime;

    // convert 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);


    // determine 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;

}

Cease the countdown once it reaches the specified date

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

When executing store.sync() in ExtJS, all fields are passed

What is the best way to create a reusable component for a Material-UI Snackbar?

Visual Studio Code unable to locate source maps for typescript debugging

Tips for automatically updating the time in a React application while utilizing the 'date-fns' library

Querying MongoDB to retrieve particular elements from an array within a collection

Looking to retrieve the key value or iteration of a specific item within an Angular UI tree?

Is it feasible to utilize the HTML5 video tag in conjunction with a JSON callback?

Bringing tex2max.js into an angular application using npm and index.html

Importing named exports dynamically in Next.js

Changing the background color of a button

In the event that the user is authenticated within an iframe, proceed to redirect the parent window

using vuejs, learn how to retrieve properties within the .then function

Issue encountered while constructing NextJS application; error was encountered during the pre-rendering of the

Ways to personalize the interface following the selection of an item from a dropdown menu

"Utilize Node to import either all dependencies or selectively choose specific

Is the Okta SDK compatible with all identity providers?

What is the best way to integrate model classes within an Angular module?

Encountering a Component Exception error in React Native while attempting to implement a Victory chart component

How to iterate through two arrays using AngularJS ng-repeat

I'm encountering difficulty accessing the Index value within the template's Ref