Question

下面是我的JS，然后是我的HTML。我无法弄清楚为什么我的倒计时钟不会自动倒计时。您必须每秒刷新一次以查看剩余的正确时间。有任何想法吗？顺便说一句，这是我正在努力的圣诞倒计时网站。

var Countdowns = function(end, elements, timer, callback) {
  var _seconds = 1000,
    _minutes = _seconds * 60,
    _hours = _minutes * 60,
    _days = _hours * 24,

    end = new Date(end)
  timer,

  calculate = function() {
    var now = new Date(),
      remaining = end.getTime() - now.getTime(),
      data;


    if (isNaN(end)) {
      console.log('Invalid date/time')
      return;
    }

    if (remaining <= 0) { // clear timer
      clearInterval(timer);
      // callback
      if (typeof callback === 'function') {
        callback()
      }
    } else {
      if (!timer) {
        timer = setInterval(calculate, _seconds);
      }
      data = {
        'days': Math.floor(remaining / _days),
        'hours': Math.floor((remaining % _days) / _hours),
        'minutes': Math.floor((remaining % _hours) / _minutes),
        'seconds': Math.floor((remaining % _minutes) / _seconds),
      }

      if (elements.length) {
        for (x in elements) {
          var x = elements[x];
          data[x] = ('00' + data[x]).slice(-2);
          document.getElementById(x).innerHTML = data[x];
        }
      }
    }






  };
  calculate();
}

<!DOCTYPE html>
<html>

<head>
  <title>Countdowns</title>
</head>

<body>
  <span id="days">00</span>
  <span id="hours">00</span>
  <span id="minutes">00</span>
  <span id="seconds">00</span>

  <script src="Countdowns.js"></script>
  <script>
    var callbackfunction = function() {
      console.log('Done!')
    }
    Countdowns('12/25/2015 00:00:00 AM', ['days', 'hours', 'minutes', 'seconds']);
    callbackfunction);
  </script>
</body>

</html>

Answer 1

将callbackfunction);替换为callbackfunction();

Answer 2

＆＃13;

var Countdowns = function(end, elements, timer, callback) {
  var _seconds = 1000,
    _minutes = _seconds * 60,
    _hours = _minutes * 60,
    _days = _hours * 24,
    end = new Date(end)
  timer,
  calculate = function() {
    var now = new Date(),
      remaining = end.getTime() - now.getTime(),
      data;
    if (isNaN(end)) {
      console.log('Invalid date/time')
      return;
    }
    if (remaining <= 0) { // clear timer
      clearInterval(timer);
      // callback
      if (typeof callback === 'function') {
        callback()
      }
    } else {
      if (!timer) {
        timer = setInterval(calculate, _seconds);
      }
      data = {
        'days': Math.floor(remaining / _days),
        'hours': Math.floor((remaining % _days) / _hours),
        'minutes': Math.floor((remaining % _hours) / _minutes),
        'seconds': Math.floor((remaining % _minutes) / _seconds),
      }

      if (elements.length) {
        for (x in elements) {
          var x = elements[x];
          data[x] = ('00' + data[x]).slice(-2);
          document.getElementById(x).innerHTML = data[x];
        }
      }
    }
  };
  calculate();
};

var callbackfunction = function() {
  console.log('Done!')
};
Countdowns('12/25/2015 00:00:00 AM', ['days', 'hours', 'minutes', 'seconds']);

＆＃13;

<span id="days">00</span>
  <span id="hours">00</span>
  <span id="minutes">00</span>
  <span id="seconds">00</span>

＆＃13;

Answer 3

您有几个小错误。试试这个：

var Countdowns = function(end, elements, timer, callback) {
  var _seconds = 1000,
    _minutes = _seconds * 60,
    _hours = _minutes * 60,
    _days = _hours * 24,

    end = new Date(end)
  timer,

  calculate = function() {
    var now = new Date(),
      remaining = end.getTime() - now.getTime(),
      data;


    if (isNaN(end)) {
      console.log('Invalid date/time')
      return;
    }

    if (remaining <= 0) { // clear timer
      clearInterval(timer);
      // callback
      if (typeof callback === 'function') {
        callback()
      }
    } else {
      if (!timer) {
        timer = setInterval(calculate, _seconds);
      }
      data = {
        'days': Math.floor(remaining / _days),
        'hours': Math.floor((remaining % _days) / _hours),
        'minutes': Math.floor((remaining % _hours) / _minutes),
        'seconds': Math.floor((remaining % _minutes) / _seconds),
      }

      if (elements.length) {
        for (x in elements) {
          var x = elements[x];
          data[x] = ('00' + data[x]).slice(-2);
          document.getElementById(x).innerHTML = data[x];
        }
      }
    }
  };
  calculate();
};

var callbackfunction = function() {
  console.log('Done!')
}
Countdowns('12/25/2015 00:00:00 AM', ['days', 'hours', 'minutes', 'seconds']);
callbackfunction();

<!DOCTYPE html>
<html>

<head>
  <title>Countdowns</title>
</head>

<body>
  <span id="days">00</span>
  <span id="hours">00</span>
  <span id="minutes">00</span>
  <span id="seconds">00</span>
  <script src="Countdowns.js"></script>
</body>

</html>

JavaScript倒计时时钟不会自动倒计时

3 个答案: