倒數計時器，帶有動態日期

Question

我正在編寫一個倒數計時器，它將在每天早上 11 點重置，我打電話的日期是動態的，這意味着日期每天都會改變。 一些我如何正確編碼它有時會顯示正確的倒計時，但通常當我在 Windows 系統上隨機檢查它時它會顯示 NAN NAN。

下面是我的代碼 -

<div class="countdown">
    <span>DEAL TIME LEFT : </span>
    <p id="demo"></p>
</div>
<script>

    var currentDate = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
    var day = currentDate.getDate();
    var month = currentDate.getMonth() + 1;
    var year = currentDate.getFullYear();
    //alert(year);
    // Set the date we're counting down to
    var countDownDate = new Date(day+" "+month+" "+year+",  11:00: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 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);
        document.getElementById("demo").innerHTML = hours + " : "
    + minutes + " : " + seconds;

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

即使我已經檢查過，警報（日），警報（月），警報（年）所有這些都是正確的，但我仍然收到“NAN，NAN”錯誤。

Answer 1

你在這里有問題

var countDownDate = new Date(day+" "+month+" "+year+",  11:00:00").getTime();

Date構造函數無法解析您的字符串並且.getTime()返回NaN 。

而不是使用字符串。 您可以使用Date構造函數的其他參數。

新日期（年，月[，日期[，小時[，分鍾[，秒[，毫秒]]]]]）;

var countDownDate = new Date(year, month, day,11).getTime();

 <div class="countdown"> <span>DEAL TIME LEFT : </span> <p id="demo"></p> </div> <script> var currentDate = new Date(new Date().getTime() + 24 * 60 * 60 * 1000); var day = currentDate.getDate(); var month = currentDate.getMonth() ; var year = currentDate.getFullYear(); //alert(year); // Set the date we're counting down to var countDownDate = new Date(year, month, day,11).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 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); document.getElementById("demo").innerHTML = hours + " : " + minutes + " : " + seconds; // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); </script>

Answer 2

我猜您想倒計時到上午 11 點，如果是 11 點之后，則到明天上午 11 點。

以下創建一個結束日期，即今天 11:00 或明天 11:00（如果在此之后）。 然后格式化剩余時間。 然后有一個計時器每秒調用一次，就在下一整秒之后，這樣它就不會漂移。

它只創建一個日期並顯示如何添加一天並將其設置為特定時間。

希望評論是足夠的。

 function showRemaining() { var endDate = new Date(); // If after 1100, add a day if (endDate.getHours() > 11) { endDate.setDate(endDate.getDate() + 1); } // Set time to 11am; endDate.setHours(11,0,0,0); // Get seconds from now to end var diff = Math.ceil((endDate - Date.now())/1000); // Show time as h:mm:ss return ( (diff/3.6e3|0) + ':' + ('0'+((diff%3.6e3)/60|0)).slice(-2) + ':' + ('0'+(diff%60)).slice(-2) ); } // Run every second just after next full second (function timer() { console.log(showRemaining()); var lag = 1020 - (Date.now()%1000) setTimeout(timer, lag); }());