imgrooot 1 Posted April 6, 2017 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> Quote Share this post Link to post Share on other sites
benanamen 114 Posted April 6, 2017 (edited) WHY are you posting a Javascript question in the PHP forum? To answer your question, Yes, there is a way to have multiple counters on the same page. You could have found numerous examples with google like this one http://www.online-timers.com/multiple-timers Edited April 6, 2017 by benanamen Quote Share this post Link to post Share on other sites
Psycho 565 Posted April 6, 2017 (edited) <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 April 6, 2017 by Psycho Quote Share this post Link to post Share on other sites
imgrooot 1 Posted April 6, 2017 <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! Quote Share this post Link to post Share on other sites
