時間がマイナスで読み始めますが、終了メッセージはまだ表示されています

-2

サイトに入れたいカウントダウンタイマーに問題があります。カウントダウンは正常ですが、すべてが問題ありませんが、タイマーの終了時にタイマーをクリアして終了メッセージまたはコールバックを表示するのではなく、サイドで終了メッセージを表示しますが、時間は負。時間がマイナスで読み始めますが、終了メッセージはまだ表示されています

誰かが間違っていたことを私に見せてもらえますか？

これは私のコードです：


 
    // Set the date we're counting down to 
 
    var countDownDate = new Date("March 31, 2017 09:35:00 PM").getTime(); 
 
    // 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 days, 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); 
 
     
 
       
 
     
 
     // Output the result in an element with id="demo" 
 
     
 
     document.getElementById("days").innerHTML = days; 
 
     document.getElementById("hours").innerHTML = hours; 
 
     document.getElementById("minutes").innerHTML = minutes; 
 
     document.getElementById("seconds").innerHTML = seconds; 
 
    \t 
 
    \t 
 
    \t 
 
     
 
     // If the count down is over, write some text 
 
    \t if (distance < 0) { 
 
      clearInterval(x); 
 
      document.getElementById("endmessage").innerHTML = "EXPIRED"; 
 
    \t \t 
 
     } 
 
     
 
    }, 1000);

body { 
 
    \t \t \t background: #f6f6f6; 
 
    \t \t } 
 
    
 
    \t \t .countdownContainer{ 
 
    \t \t \t position: absolute;; 
 
    \t \t \t top: 50%; 
 
    \t \t \t left: 50%; 
 
    \t \t \t transform : translateX(-50%) translateY(-50%); 
 
    \t \t \t text-align: center; 
 
    \t \t \t background: #ddd; 
 
    \t \t \t border: 1px solid #999; 
 
    \t \t \t padding: 10px; 
 
    \t \t \t box-shadow: 0 0 5px 3px #ccc; 
 
    \t \t } 
 
    
 
    \t \t .info { 
 
    \t \t \t font-size: 80px; 
 
    \t \t }

<!DOCTYPE HTML> 
 
    <html> 
 
    <head> 
 

 
    </head> 
 
    <body> 
 
    <table class="countdownContainer"> 
 
    \t \t \t <tr class="info"> 
 
    \t \t \t \t <td colspan="4">Countdown to April fool</td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr class="info"> 
 
    \t \t \t \t <td id="days">00</td> 
 
    \t \t \t \t <td id="hours">00</td> 
 
    \t \t \t \t <td id="minutes">00</td> 
 
    \t \t \t \t <td id="seconds">00</td> 
 
    \t \t \t \t 
 
    \t \t \t \t <td id="endmessage"></td> 
 
    \t \t \t </tr> 
 
    \t \t \t <tr> 
 
    \t \t \t \t <td>Days</td> 
 
    \t \t \t \t <td>Hours</td> 
 
    \t \t \t \t <td>Minutes</td> 
 
    \t \t \t \t <td>Seconds</td> 
 
    \t \t \t </tr> 
 
    \t \t </table> 
 
    \t \t 
 
    <p id="demo"></p> 
 
    
 
    <script> 
 
     
 
    </script> 
 
    
 
    </body> 
 
    
 
     
 
    </html>

出典

2017-04-01 Amasiatu Valentine Chidozie

'緊急の対応をしてください。 ' - あなたはフレーズが本当に何も意味していないことを理解しています。それは実際にちょっと眉をひそめている。 –

問題は、プログラムの作成が完了していないことです。 – traktor53

[もっと速い回答を得るために、どのような状況で私の質問に「緊急」やその他の類似のフレーズを追加することができますか？]（https://meta.stackoverflow.com/q/326569） - 要約は、ボランティアに対処する理想的な方法ではなく、おそらく回答を得ることに逆効果があります。これをあなたの質問に追加しないでください。 – halfer

は、それはすでに4月の第1回ではないですか？それは3月31日のようにすでに過ぎている日まで数えていますか？

また、あなたはこれが今日、午前9時35分までカウントダウン

<script> 

// Set the date we're counting down to 
var countDownDate = new Date("April 1, 2017 09:35:00").getTime(); 
// 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 days, 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); 



    // Output the result in an element with id="demo" 

    document.getElementById("days").innerHTML = days; 
    document.getElementById("hours").innerHTML = hours; 
    document.getElementById("minutes").innerHTML = minutes; 
    document.getElementById("seconds").innerHTML = seconds; 




    // If the count down is over, write some text 
    if (distance < 0) { 
     clearInterval(x); 
     document.getElementById("endmessage").innerHTML = "EXPIRED"; 

    } 

}, 1000); 

</script>

、PMを必要とPMを削除し、ちょうど09または21などを持っていないAM/PM

ません。

出典

2017-04-01 06:29:19

@クリスチャンはあなたの観察に感謝します。私は –

私はあなたのコードをいくつか変更しました。違いは、だから、その部分は、あなたのIFの他の条件内に移動0より大きい場合、以下のこと、

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
<style type="text/css"> 
 
     body { 
 
      background: #f6f6f6; 
 
     } 
 

 
     .countdownContainer{ 
 
      position: absolute;; 
 
      top: 50%; 
 
      left: 50%; 
 
      transform : translateX(-50%) translateY(-50%); 
 
      text-align: center; 
 
      background: #ddd; 
 
      border: 1px solid #999; 
 
      padding: 10px; 
 
      box-shadow: 0 0 5px 3px #ccc; 
 
     } 
 

 
     .info { 
 
      font-size: 80px; 
 
     } 
 
     </style> 
 
</head> 
 
<body> 
 
<table class="countdownContainer"> 
 
      <tr class="info"> 
 
       <td colspan="4">Countdown to April fool</td> 
 
      </tr> 
 
      <tr class="info"> 
 
       <td id="days">00</td> 
 
       <td id="hours">00</td> 
 
       <td id="minutes">00</td> 
 
       <td id="seconds">00</td> 
 

 
       <td id="endmessage"></td> 
 
      </tr> 
 
      <tr> 
 
       <td>Days</td> 
 
       <td>Hours</td> 
 
       <td>Minutes</td> 
 
       <td>Seconds</td> 
 
      </tr> 
 
     </table> 
 

 
<p id="demo"></p> 
 

 
<script> 
 

 
// Set the date we're counting down to 
 
var countDownDate = new Date("April 01, 2017 12:00:30 PM").getTime(); 
 
// 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 days, 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 over, write some text 
 
    if (distance < 0) { 
 
     clearInterval(x); 
 
     document.getElementById("endmessage").innerHTML = "EXPIRED"; 
 

 
    } 
 
    else{ 
 
    // Output the result in an element with id="demo" 
 

 
    document.getElementById("days").innerHTML = days; 
 
    document.getElementById("hours").innerHTML = hours; 
 
    document.getElementById("minutes").innerHTML = minutes; 
 
    document.getElementById("seconds").innerHTML = seconds; 
 
    } 
 

 
}, 1000); 
 

 
</script> 
 

 
</body> 
 

 

 
</html>

カウントダウンが印刷されるたびを見つけてください、それだけで行われるべきです。それに応じて日付を調整して、カウントダウンをテストします。

出典

2017-04-01 06:33:53

がうまく働いたことを感謝します。どうもありがとう。感謝しています。私はあなたに借りができた。ありがとうございました。 –

喜んで。私の答えを正確にマークして、優しくupvoteをしてください –

時間がマイナスで読み始めますが、終了メッセージはまだ表示されています

答えて

関連する問題