Question

我正在尝试下面的代码倒计时到确切的日期和时间。我的意思是，我想制作一个收缩不足的网站倒数日期（包括确切的时间）。但是约会并没有倒计时。 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(new Date());

＆＃13;

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")

＆＃13;

<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>

＆＃13;

Answer 2

我认为你让这个过于复杂。如果你只是从一个日期开始然后每一秒，从那个开始日期减去一秒，你就完成了。

var out = document.getElementById("output");
var start = new Date();
setInterval(function(){
  start = new Date(start.getTime() - 1000);
  out.textContent =
    start.getHours() + " Hours, " + start.getMinutes() + " Minutes, " + start.getSeconds() + " Seconds";
},1000);

<div>Counting down from current time</div>
<span id="output"></span>

日期并包括使用javascript倒计时的时间

2 个答案: