每天执行JavaScript倒数计时器递归调用

Question

I am trying to make a countdown timer which displays the amount of time remaining for a customer to purchase in order to receive same day shipping.

For example, if they purchase before 15:30 the timer will say something like order within 30 minutes for shipping today (if it was 15:00).

However, when it reaches 15:30, I want it to say order within 23 hours and 59 minutes to receive shipping tomorrow. Then obviously when it reaches midnight it will turn to today. Alternatively it can just display the day/date so today/tomorrow won't matter.

I know I need to call the function again looking at tomorrows date but I'm not very handy with javascript so cannot figure it out.

Can someone help?

 // Set the date we're counting down to var nowDate = new Date(); var countDownDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 15, 30, 0, 0); // 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 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="demo" if (hours >= 1) { document.getElementById("shipping-countdown").innerHTML = "Order within " + hours + "h " + minutes + "m " + seconds + "s " + "to have your order shipped on " // date of shipment; } else if (hours < 1 && minutes < 1) { document.getElementById("shipping-countdown").innerHTML = "Order within " + seconds + "s " + "to have your order shipped on " // date of shipment; } else { document.getElementById("shipping-countdown").innerHTML = "Order within " + minutes + "m " + seconds + "s " + "to have your order shipped on " // date of shipment; } // If the count down is finished, write some text if (distance < 0) { clearInterval(x); // Start again but looking at tomorrows date } // If the count down is finished, write some text if (nowDate.getDay() == 0 || nowDate.getDay() == 6) { clearInterval(x); document.getElementById("shipping-countdown").innerHTML = "Order within " + days + "d " + hours + "h " + minutes + "m " + seconds + "s " + "to have your order shipped on " // Start of the week; } }, 1000); 

 <!-- Display the countdown timer in an element --> <p id="shipping-countdown"></p> 

Answer 1

You don't need to clear the setInterval function. Just reset the new target date while keeping it alive. You also had some issues with the countdown going into the negatives which I fixed by moving the distance check and resetting the distance if it is under 1 second.

  // Set the date we're counting down to var nowDate = new Date(); var countDownDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 11, 2, 50, 0); // 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; if (distance < 1) { countDownDate = countDownDate.setDate(countDownDate.getDate()+1); distance = countDownDate - now; } // Time calculations for 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="demo" if (hours >= 1) { document.getElementById("shipping-countdown").innerHTML = "Order within " + hours + "h " + minutes + "m " + seconds + "s " + "to have your order shipped on " // date of shipment; } else if (hours < 1 && minutes < 1) { document.getElementById("shipping-countdown").innerHTML = "Order within " + seconds + "s " + "to have your order shipped on " // date of shipment; } else { document.getElementById("shipping-countdown").innerHTML = "Order within " + minutes + "m " + seconds + "s " + "to have your order shipped on " // date of shipment; } // If the count down is finished, write some text if (nowDate.getDay() == 0 || nowDate.getDay() == 6) { clearInterval(x); document.getElementById("shipping-countdown").innerHTML = "Order within " + days + "d " + hours + "h " + minutes + "m " + seconds + "s " + "to have your order shipped on " // Start of the week; } }, 1000); 

 <!-- Display the countdown timer in an element --> <p id="shipping-countdown"></p> 

Answer 2

I have managed to achieve this with the following code, figured out I was along the wrong lines and could simply just adjust the countDownDate variable.

 // Set the date we're counting down to var nowDate = new Date(); var countDownDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 15, 30, 0, 0); // 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 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); // If the count down is finished, write some text if (countDownDate.getDay() == 6) { countDownDate.setDate(countDownDate.getDate()+2); } if (days >= 1) { document.getElementById("shipping-countdown").innerHTML = "Order within " + days + "d " + hours + "h " + minutes + "m " + seconds + "s " + "to have your order shipped on " + countDownDate; } else if (hours >= 1) { document.getElementById("shipping-countdown").innerHTML = "Order within " + hours + "h " + minutes + "m " + seconds + "s " + "to have your order shipped on " + countDownDate.getDate() + "/" + (countDownDate.getMonth()+1) + "/" + countDownDate.getFullYear(); } else if (minutes >= 1) { document.getElementById("shipping-countdown").innerHTML = "Order within " + minutes + "m " + seconds + "s " + "to have your order shipped on " + countDownDate.getDate() + "/" + (countDownDate.getMonth()+1) + "/" + countDownDate.getFullYear(); } else { document.getElementById("shipping-countdown").innerHTML = "Order within " + seconds + "s " + "to have your order shipped on " + countDownDate.getDate() + "/" + (countDownDate.getMonth()+1) + "/" + countDownDate.getFullYear(); } // If the count down is finished if (distance < 0) { countDownDate.setDate(countDownDate.getDate()+1); } }, 1000); 

 <!-- Display the countdown timer in an element --> <p id="shipping-countdown"></p>