imgrooot Posted April 6, 2017 Share 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 Link to comment https://forums.phpfreaks.com/topic/303632-is-there-a-way-to-use-multiple-countdown-counters-on-same-page/ Share on other sites More sharing options...
benanamen Posted April 6, 2017 Share 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 Link to comment https://forums.phpfreaks.com/topic/303632-is-there-a-way-to-use-multiple-countdown-counters-on-same-page/#findComment-1545083 Share on other sites More sharing options...
Solution Psycho Posted April 6, 2017 Solution Share 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 Link to comment https://forums.phpfreaks.com/topic/303632-is-there-a-way-to-use-multiple-countdown-counters-on-same-page/#findComment-1545092 Share on other sites More sharing options...
imgrooot Posted April 6, 2017 Author Share 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 Link to comment https://forums.phpfreaks.com/topic/303632-is-there-a-way-to-use-multiple-countdown-counters-on-same-page/#findComment-1545096 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.