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函数中。如果你的网站上没有这种方式，只需将这部分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 load的一个很好的解释：

{{1}}事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM 中，并且所有图像，脚本，链接和子帧都已完成加载。

（强调我的）

Answer 2

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

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

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

倒计时钟（JS）

2 个答案: