倒计时时钟 (JS）

Countdown Clock (JS)

本文关键字：JS 时钟 倒计时      更新时间：2023-09-26

我可以在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);

您能提供的任何帮助将不胜感激。谢谢。

> 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事件在文档加载过程结束时触发。此时，文档中的所有对象都在 DOM 中，并且所有图像、脚本、链接和子框架都已完成加载。

（强调我的）

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

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

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

相关文章：