时间开始以负号显示，而结束消息仍显示

Question

我想放在网站上的倒数计时器出现了一些问题。倒计时是正常的，一切都很好，但是在计时器结束时，它不是清除计时器并显示结束消息或回调，而是在旁边显示结束消息，同时时间继续读取否定。

谁能告诉我哪里出了问题？

这是我的代码：

 
    // 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;
     
     
      
        
        // If the count down is over, write some text 
     if (distance < 0) {
            clearInterval(x);
            document.getElementById("endmessage").innerHTML = "EXPIRED";
      
        }
       
    }, 1000);

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

<!DOCTYPE HTML>
    <html>
    <head>

    </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>
     
    </script>
    
    </body>
    
       
    </html>

Answer 1

现在不是 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。

Answer 2

我对你的代码做了一些修改。请在下面找到它，

<!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 的 else 条件中。相应地调整日期以测试您的倒计时。

时间开始以负号显示，而结束消息仍显示

Time starts reading in minus, while the end message still shows

javascript

countdown