2017-09-28 62 views
0

我正在嘗試製作一個倒數計時器,它顯示客戶爲了接收同一天發貨而剩餘的剩餘時間量。JavaScript倒數計時器每天遞歸調用

例如,如果他們在15:30之前購買計時器將會在今天(如果是15:00)在30分鐘內發貨。

但是,當它到達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) { 
 
    \t document.getElementById("shipping-countdown").innerHTML = "Order within " + hours + "h " 
 
    \t + minutes + "m " + seconds + "s " + "to have your order shipped on " // date of shipment; 
 
    } 
 
    
 
    else if (hours < 1 && minutes < 1) { 
 
    \t document.getElementById("shipping-countdown").innerHTML = "Order within " + seconds + "s " 
 
    + "to have your order shipped on " // date of shipment; 
 
    } 
 
    
 
    else { 
 
    \t 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 " 
 
    \t + 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>

+1

邊注:我的屏幕上,在GMT -0400 EST,計數器當前讀取5h17m出貨,這是我的偏移15:30。但是,真正的運輸切斷(_my_時區)?或者它是託運人/倉庫的時區?如果後者,你需要說明這一點。 – msanford

+1

@msanford這是我已經考慮過的事情,但現在我只想讓它運行格林威治標準時間,因爲其他時區將有他們自己的個人實施。 – James

+0

_「我知道我需要再次調用函數來查看明天的日期,但是我對JavaScript不太好用,所以無法弄清楚。」_您需要使用不同的日期再次調用哪個函數? –

回答

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) { 
 
     \t document.getElementById("shipping-countdown").innerHTML = "Order within " + hours + "h " 
 
     \t + minutes + "m " + seconds + "s " + "to have your order shipped on " // date of shipment; 
 
     } 
 
     
 
     else if (hours < 1 && minutes < 1) { 
 
     \t document.getElementById("shipping-countdown").innerHTML = "Order within " + seconds + "s " 
 
     + "to have your order shipped on " // date of shipment; 
 
     } 
 
     
 
     else { 
 
     \t 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 " 
 
     \t + 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>

0

我設法用下面的代碼來實現這一目標,想通了,我正沿着錯誤路線,可能只是簡單地調整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) { 
 
    \t document.getElementById("shipping-countdown").innerHTML = "Order within " + days + "d " + hours + "h " 
 
    \t + minutes + "m " + seconds + "s " + "to have your order shipped on " + countDownDate; 
 
    } 
 
    
 
    else if (hours >= 1) { 
 
    \t document.getElementById("shipping-countdown").innerHTML = "Order within " + hours + "h " 
 
    \t + minutes + "m " + seconds + "s " + "to have your order shipped on " + countDownDate.getDate() + "/" 
 
    + (countDownDate.getMonth()+1) + "/" + countDownDate.getFullYear(); 
 
    } 
 
    
 
    else if (minutes >= 1) { 
 
    \t 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 { 
 
    \t 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>

+0

你倒計時下降到-1 ..這是你想要的? –

+0

@ LucasKot-Zaniewski不,也許我應該把它改爲1而不是0. – James

+0

查看我的答案! –