倒计时时钟 (JS)

Question

我可以在 jsfiddle 中使用以下内容，但不能在我的网站上使用。数字不显示，这让我认为我的 js 有问题。我需要在某处添加 window.onload 吗？如果需要，在哪里？

html:

<h1>Countdown Clock</h1>
<div id="clockdiv">
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

CSS:

body {
  text-align: center;
  background: #00ECB9;
  font-family: sans-serif;
  font-weight: 100;
}

h1 {
  color: #396;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}

#clockdiv {
  font-family: sans-serif;
  color: #fff;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 30px;
}

#clockdiv > div {
  padding: 10px;
  border-radius: 3px;
  background: #00BF96;
  display: inline-block;
}

#clockdiv div > span {
  padding: 15px;
  border-radius: 3px;
  background: #00816A;
  display: inline-block;
}

.smalltext {
  padding-top: 5px;
  font-size: 16px;
}

JS:

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(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

// change date below to change countdown
var deadline = 'February 26 2016 17:00:00 GMT+12:00';
initializeClock('clockdiv', deadline);

如果您能提供任何帮助，我们将不胜感激。谢谢

Answer 1

请注意，当您单击 JSFiddle 上的 "JavaScript" 按钮时，onLoad 属性指定包含的代码在其余内容之后加载。

因此，请尝试在调用函数之前添加 window.onload =，此处更准确地指定：

https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload

Answer 2

JSFiddle 会自动将您的 JavaScript 放入 onload 函数中。如果您的网站上没有这种方式，只需将 JavaScript 的这一部分包装在事件侦听器中：

window.addEventListener("load", function () {
    // change date below to change countdown
    var deadline = 'February 26 2016 17:00:00 GMT+12:00';
    initializeClock('clockdiv', deadline);
});

可以找到 window.onload 的一个很好的解释 here:

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.

（强调我的）

倒计时时钟 (JS)

Countdown Clock (JS)

javascript

html

css

countdowntimer