時間開始在減去閱讀，而結束消息仍然顯示

-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日已經過去的一天？

而且，你不需要PM，去除PM，只是有09或21等不AM/PM

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

這倒計數至09:35，莫衷一是。

來源

2017-04-01 06:29:19

@克里斯蒂安感謝您的觀察。我很欣賞 –

我對您的代碼進行了一些更改。請在下面找到它，

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

每次打印倒計時，應該只有當差大於0，所以動了你的IF的其他條件中的部分完成。相應地調整日期以測試倒計時。

來源

2017-04-01 06:33:53

它運作非常好。非常感謝。很感激。我欠你。感謝和親切的問候。 –

很高興。請標記我的答案是否正確，然後善待你 –

時間開始在減去閱讀，而結束消息仍然顯示

回答

相關問題