倒数计时器，带有动态日期

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>

即使我检查过，alert(day),alert(month),alert(year) 所有这些都是正确的，但我仍然得到 "NAN, NAN"错误.

Answer 1

你这里有问题

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

Date 构造函数无法解析您的字符串和 .getTime() return NaN.

而不是使用字符串。您可以使用 Date 构造函数的其他参数。

new Date(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]]);

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

倒数计时器，带有动态日期

Count down timer, with a dynamic date

html

javascript

magento-1.9