2017-09-28 16 views
0

私は同じ日の出荷を受けるために顧客が購入するために残っている時間を表示するカウントダウンタイマーを作ろうとしています。JavaScriptカウントダウンタイマー再帰呼び出し毎日

例えば、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) { 
 
    \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で、カウンタは現在、私の15h30にオフセットされ、出荷する5h17mを読み込みます。しかし、実際の出荷カットオフ(_my_タイムゾーン)ですか?それとも、荷送人/倉庫のタイムゾーンですか?後者の場合は、それを考慮する必要があります。 – msanford

+1

@msanfordこれは私が考えているものですが、今はGMTのために機能したいだけです。他のタイムゾーンには独自の実装があります。 – 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

私の答えをチェック! –

関連する問題