Question

我试图为2019年8月19日发生的事件建立一个倒计时时钟。

倒数美学是我想要的，但是它不起作用。我以为我已经正确定义了逻辑和变量，但是遇到了麻烦：
1-找到一种链接日期，小时，分钟和秒数变量的方法。
2-开始计时。

感谢任何帮助或指导！
PS Am将其构建为可集成到SharePoint中（多么有趣...）

<!DOCTYPE html>
<html>
  <head>
    <title>APRA Countdown</title>
    <style type="text/css">
    body {
        background: #f6f6f6
    }

    .countdownContainer{
        position: absolute;;
        top: 50%;
        left: 50%;
        transform : translateX(-50%) translateY(-50%);
        text-align: center;
        background: #ddd;
        border: 1px solid #999;
        padding: 10px;
        box-shadow: 0 0 5px 3px #ccc;
    }

    .info {
        font-size: 80px;
    }
    </style>
  </head>
<body>
    <table class="countdownContainer">
        <tr>
            <td colspan="4" class="info">APRA Countdown</td>
        </tr>
        <tr class="info">
            <td id="days">2</td>
            <td id="hours">3</td>
            <td id="minutes">5</td>
            <td id="seconds">7</td>
        </tr>
            <td>Days</td>
            <td>Hours</td>
            <td>Minutes</td>
            <td>Seconds</td>
   </table>
   <script type="text/javascript">

    function countdown(){
        var now = new Date();
        var eventDate = new Date(now.getFullYear(), 7, 19);

        var currentTime = now.getTime();
        var eventTime = eventDate.getTime();

        var remTime = eventTime - currentTime;

        var s = Math.floor(remTime / 1000);
        var m = Math.floor(s / 60);
        var h = Math.floor(m / 60);
        var d = Math.floor(h / 24);

        h %= 24;
        m %= 60;
        s %= 60;

        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;

      document.getElementByID("days").textContent = d;
      document.getElementByID("hours").textContent = h;
      document.getElementByID("minutes").textContent = m;
      document.getElementByID("seconds").textContent = s;

      setTimeout(countdown, 1000);

   }

   countdown();


</body>
</html>

Answer 1

它的getElementById不是getElementByID

function countdown() {
  var now = new Date();
  var eventDate = new Date(now.getFullYear(), 7, 19);

  var currentTime = now.getTime();
  var eventTime = eventDate.getTime();

  var remTime = eventTime - currentTime;

  var s = Math.floor(remTime / 1000);
  var m = Math.floor(s / 60);
  var h = Math.floor(m / 60);
  var d = Math.floor(h / 24);

  h %= 24;
  m %= 60;
  s %= 60;

  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;

  document.getElementById("days").textContent = d;
  document.getElementById("hours").textContent = h;
  document.getElementById("minutes").textContent = m;
  document.getElementById("seconds").textContent = s;

  setTimeout(countdown, 1000);

}

countdown();

body {
  background: #f6f6f6
}

.countdownContainer {
  position: absolute;
  ;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  background: #ddd;
  border: 1px solid #999;
  padding: 10px;
  box-shadow: 0 0 5px 3px #ccc;
}

.info {
  font-size: 80px;
}

<table class="countdownContainer">
  <tr>
    <td colspan="4" class="info">APRA Countdown</td>
  </tr>
  <tr class="info">
    <td id="days">2</td>
    <td id="hours">3</td>
    <td id="minutes">5</td>
    <td id="seconds">7</td>
  </tr>
  <tr>
    <td>Days</td>
    <td>Hours</td>
    <td>Minutes</td>
    <td>Seconds</td>
  </tr>
</table>

JS倒数计时器（天：分钟：小时：秒）不起作用

1 个答案: