javascript - 如何减少下面代码中的时间直到它变为零？

Question

我试图通过以毫秒为单位给出时间和日期来进行时间戳倒计时，但我无法解决这个问题。

var distance = countDownDate-- 

只会将数字递减一次。我想像计时器一样将它递减到零。

// Set the date we're counting down to
var d = new Date();
d.setTime(405000000);
var countDownDate = d;

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

  //this line decrementing only by one time, but I need till the time becomes zero
  var distance = countDownDate--;

  // 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 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

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

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

标签： javascripthtml

Answer 1

您的代码确实有效。

问题是，difference以毫秒为单位，你每秒递减一。因此，如果您停留 1000 秒（大约 17 分钟），您会看到计数器减少 1 秒。

1000为了解决它，在每次迭代中减去：

// Set the date we're counting down to
var d = new Date();
d.setTime(405000000);
var countDownDate = d;

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

  //this line deceremneting only by one time, but I need till the time becomes zero
  var distance = countDownDate -= 1000;

  // 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 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);

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

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

但是，setTimeout并且setInterval可能不准确，因此建议每次迭代都获取当前时间：

// Set the date we're counting down to
var endDate = Date.now() + 405000000;

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

  //this line deceremneting only by one time, but I need till the time becomes zero
  var distance = endDate - Date.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("demo").innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s ";

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

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

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