如何将确切时间添加到倒数计时器的日期？

Question

我怎样才能在计数器中添加“19:30”这样的准确时间，并且仍然显示 "Tomorrow"、"Today" 和 "Expired" 消息？

因为当我添加“19:30:00”时，计数器不准确。

当我使用 "Math.floor" 而不是 "Math.ceil" 时，计数器是准确的，但消息没有在它们应该显示的时间显示。

<!DOCTYPE HTML>
<html>
    <head>
        <style>
        p {
          text-align: center;
          font-size: 60px;
        }
        </style>
    </head>
    <body>

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

        <script>
        // Set the date we're counting down to
        var countDownDate = new Date("Dec 18, 2017 19:30: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.ceil(distance / (1000 * 60 * 60 * 24));
            var hours = Math.ceil((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.ceil((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.ceil((distance % (1000 * 60)) / 1000);

            // Output the result in an element with id="demo"
            document.getElementById("demo").innerHTML = days + "d " + hours + "h "
            + minutes + "m " + seconds + "s ";

            // If the count down is over, write some text 

            console.log(days);
            if (days === 1) {
                clearInterval(x);
                document.getElementById("demo").innerHTML = "TOMORROW";
            }  
            if (days === 0) {
                clearInterval(x);
                document.getElementById("demo").innerHTML = "TODAY";
            }   
            if (days < 0) {
                clearInterval(x);
                document.getElementById("demo").innerHTML = "EXPIRED";
            }       

        }, 1000);
        </script>

    </body>
</html>

Answer 1

这应该有效

// Set the date we're counting down to
var countDownDate = new Date("Dec 3, 2017 19:30:00");

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date();

  // Find the distance between now an the count down date
  var distance = countDownDate.getTime() - now.getTime();

  // 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("demo").innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s ";

  // If the count down is over, write some text 

  console.log(days);
  var tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
  if (tomorrow.getFullYear() == countDownDate.getFullYear() && tomorrow.getMonth() == countDownDate.getMonth() && tomorrow.getDate() == countDownDate.getDate()) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "TOMORROW";
  } else if (now.getFullYear() == countDownDate.getFullYear() && now.getMonth() == countDownDate.getMonth() && now.getDate() == countDownDate.getDate()) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "TODAY";
  } else if (countDownDate.getTime() < now.getTime()) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }

}, 1000);

p {
  text-align: center;
  font-size: 60px;
}

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

如何将确切时间添加到倒数计时器的日期？

How can i add the exact time to the date on countdown timer?

javascript

countdown