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

Question

我正在尝试制作一个倒数计时器，以显示客户购买剩余的时间才能收到当天发货。

例如，如果他们在15:30之前购买，则计时器会在30分钟内说出类似今天要发货的订单（如果是15:00）。

但是，当到达15:30时，我想说要在23小时59分钟内订购，以便明天发货。 那么很显然，当它到达午夜时分会变成今天。 另外，它也可以只显示日期/日期，因此今天/明天将无关紧要。

我知道我需要再次调用该函数以查看明天的日期，但是我对JavaScript不太方便，因此无法弄清楚。

有人可以帮忙吗？

 // 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

您无需清除setInterval函数。 只需重置新的目标日期，同时使其保持有效状态即可。 您还遇到了一些问题，因为倒数会变成负数，我通过移动距离检查并在距离小于1秒时重置距离来解决了这一问题。

  // 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

我设法通过下面的代码实现了这一点，发现我走错了方向，可以简单地调整countDownDate变量。

 // 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>