javascript - 使用 JavaScript 进行日期和倒计时时间

Question

我正在尝试下面的代码来倒计时准确的日期和时间。我的意思是，我想制作一个宫缩网站倒计时日期(包括确切时间)。但日期不倒计时。我的 Node.js 代码只是显示了错误的计数，并且没有减少秒、分钟、小时、天。这段js代码有问题，但我不明白，到底问题出在哪里。

这里是代码:

(function init() {
  function getTimeRemaining(endtime) {
    var t = Date.parse(endtime) - Date.parse(new Date("03/13/2018 9:30 AM"));
    var seconds = Math.floor((t / 1000) % 60);
    var minutes = Math.floor((t / 1000 / 60) % 60);
    var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
    var days = Math.floor(t / (1000 * 60 * 60 * 24));
    return {
      'total': t,
      'days': days,
      'hours': hours,
      'minutes': minutes,
      'seconds': seconds
    };
  }

  function initializeClock(endtime){
  var timeinterval = setInterval(function(){
    var t = getTimeRemaining(endtime);
    document.querySelector(".days > .value").innerText=t.days;
    document.querySelector(".hours > .value").innerText=t.hours;
    document.querySelector(".minutes > .value").innerText=t.minutes;
    document.querySelector(".seconds > .value").innerText=t.seconds;
    if(t.total<=0){
      clearInterval(timeinterval);
    }
  },1000);
}
initializeClock(((new Date()).getFullYear()+1) + "/1/1")
})();

Answer 1

我对您的代码做了一些修改。

我添加了一个 displayTime() 函数来处理时间显示。

initializeClock() 现在在调用 displayTime() 时直接调用它，无需等待一秒钟。

getTimeRemaining() 现在通过考虑当前日期而不是随机日期来计算正确的时间:var t = Date.parse(endtime) - Date.parse(新日期())；

function displayTime(date){
  var t = getTimeRemaining(date);
  document.querySelector(".days > .value").innerText = t.days;
  document.querySelector(".hours > .value").innerText = t.hours;
  document.querySelector(".minutes > .value").innerText = t.minutes;
  document.querySelector(".seconds > .value").innerText = t.seconds;
  return t;
}

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(endtime) {
  displayTime(endtime);
  
  var timeinterval = setInterval(function() {
    t = displayTime(endtime);
    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }, 1000);
}
initializeClock("2018/03/13 09:30")

<div class="days"><span class="value"></span> days</div>
<div class="hours"><span class="value"></span> hours</div>
<div class="minutes"><span class="value"></span> minutes</div>
<div class="seconds"><span class="value"></span> seconds</div>