每天執行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>