Jump to content

Is there a way to use multiple countdown counters on same page?


imgrooot
 Share

Go to solution Solved by Psycho,

Recommended Posts

Here is my countdown counter code. It works. But I would like to show multiple of these countdown counters with different dates, on a single page. I tried duplicating them and giving them different "due" id name but I the result I get is like this "NaNd NaNh NaNm NaNs".

 

What's the proper way to duplicate the code below and give them different dates?

<div id="due"></div>
<script>

    // Set the date we're counting down to
    var countDownDate = new Date("2017-05-05 19:01:58c").getTime();

    // Update the count down every 1 second
    var x = setInterval(function() {

      // Get todays date and time
      var now = new Date().getTime();

      // Find the distance between now an the count down date
      var distance = countDownDate - now;

      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      // Display the result in the element with id="due"
      document.getElementById("due").innerHTML = days + "d " + hours + "h "
      + minutes + "m " + seconds + "s ";

      // If the count down is finished, write some text
      if (distance < 0) {
        clearInterval(x);
        document.getElementById("due").innerHTML = "OVERDUE";
      }
    }, 1000);

</script>

Link to comment
Share on other sites

  • Solution


<html>
<head>
 
<script>
 
    //Create object with the list of due dates
    //The 'name' will correspond to the field ID to populate the results
    var dueDates = {
        'date1':'2017-03-03 02:16:02',
        'date2':'2017-05-05 19:01:58',
        'date3':'2017-06-05 05:32:33'
    };
 
    var timer = setInterval(function() {
        //Instantiate variables
        var dueDate, distance, days, hours, minutes, seconds, output;
        //Set flag to repeat function
        var repeat = false;
        // Get todays date and time
        var now = new Date().getTime();
        //Iterate through the due dates
        for (var dueDateId in dueDates)
        {
            //Get the due date for this record
            dueDate = new Date(dueDates[dueDateId]);
            // Find the distance between now an the due date
            distance = dueDate - now;
            // Time calculations for days, hours, minutes and seconds
            days    = Math.floor(distance  / (1000 * 60 * 60 * 24));
            hours   = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            seconds = Math.floor((distance % (1000 * 60)) / 1000);
            //Determine the output and populate the corresponding field
            output = "OVERDUE";
            if (distance > 0)
            {
                output = days + "d " + hours + "h " + minutes + "m " + seconds + "s";
                repeat = true; //If any record is not expired, set flag to repeat
            }
            document.getElementById(dueDateId).innerHTML = output;
            //If flag to repeat is false, clear event
            if(!repeat)
            {
                clearInterval(timer);
            }
        }
    }, 1000);
 
</script>
 
</head>
<body>
 
Date 1: <div id="date1"> </div><br>
 
Date 2: <div id="date2"> </div><br>
 
Date 3: <div id="date3"> </div><br>
</body>
</html>

 

Edited by Psycho
Link to comment
Share on other sites

<html>
<head>
 
<script>
 
    //Create object with the list of due dates
    //The 'name' will correspond to the field ID to populate the results
    var dueDates = {
        'date1':'2017-03-03 02:16:02',
        'date2':'2017-05-05 19:01:58',
        'date3':'2017-06-05 05:32:33'
    };
 
    var timer = setInterval(function() {
        //Instantiate variables
        var dueDate, distance, days, hours, minutes, seconds, output;
        //Set flag to repeat function
        var repeat = false;
        // Get todays date and time
        var now = new Date().getTime();
        //Iterate through the due dates
        for (var dueDateId in dueDates)
        {
            //Get the due date for this record
            dueDate = new Date(dueDates[dueDateId]);
            // Find the distance between now an the due date
            distance = dueDate - now;
            // Time calculations for days, hours, minutes and seconds
            days    = Math.floor(distance  / (1000 * 60 * 60 * 24));
            hours   = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            seconds = Math.floor((distance % (1000 * 60)) / 1000);
            //Determine the output and populate the corresponding field
            output = "OVERDUE";
            if (distance > 0)
            {
                output = days + "d " + hours + "h " + minutes + "m " + seconds + "s";
                repeat = true; //If any record is not expired, set flag to repeat
            }
            document.getElementById(dueDateId).innerHTML = output;
            //If flag to repeat is false, clear event
            if(!repeat)
            {
                clearInterval(timer);
            }
        }
    }, 1000);
 
</script>
 
</head>
<body>
 
Date 1: <div id="date1"> </div><br>
 
Date 2: <div id="date2"> </div><br>
 
Date 3: <div id="date3"> </div><br>
</body>
</html>

 

That works perfectly.  Thank you so much!

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.