Jump to content
imgrooot

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

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>

Share this post


Link to post
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>

 

Edited by Psycho

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

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.


×
×
  • 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.