javascript - 特定日期的倒计时

Question

我想建立一个倒计时程序。但我的问题是我无法得到

getElementsByClassName

工作（在我看来）。如果我使用整个程序将起作用

getElementById

并使用 id=""... 更改 HTML 标签

我的整个代码可以在这里找到：https ://jsfiddle.net/f1kzL78h/5/

我需要类函数，因为将来我的 HTML 文件中会有更多的 p 标记，并且我想将 Javascript 应用于我的所有具有相同名称的类。

HTML：

<p class="date">2019-04-13</p>
<p class="time">21:21</p>
<p class="appear"></p>

JS：

var articleDate = document.getElementsByClassName("date");
var articleTime = document.getElementsByClassName("time");

var total = articleDate + 'T' + articleTime + ':00';

var countDownTime = new Date(total).getTime();

var x = setInterval(function() {

    var timeNow = new Date().getTime();

    var difference = countDownTime - timeNow;

    var days = Math.floor(difference / (1000 * 60 * 60 * 24));
    var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((difference % (1000 * 60)) / 1000);

    res = days + ":" + hours + ":" + minutes + ":" + seconds;

     document.getElementsByClassName("appear") = res;

}, 1000);

我感谢我能得到的所有帮助。

标签： javascripthtml

Answer 1

“我需要类函数，因为将来我的 HTML 文件中会有更多的 p 标记，并且我想将 Javascript 应用于我所有具有相同名称的类。”

我做了一些修改来给你一个想法。我认为这可以作为您为许多元素创建倒计时的起点：

<p class="date">2019-04-13</p>
<p class="time">21:21</p>
<p class="appear"></p>

<p class="date">2019-04-13</p>
<p class="time">10:21</p>
<p class="appear"></p>

setInterval(function() {
  var articleElements = document.getElementsByClassName("date");
  for(var i = 0; i < articleElements.length; i++) {
    var articleDate = articleElements[i].innerText;
    var articleTime = articleElements[i].nextElementSibling.innerText;
    var total = articleDate + 'T' + articleTime + ':00';
    var countDownTime = new Date(total).getTime();

    var elAppear = articleElements[i].nextElementSibling.nextElementSibling;
    elAppear.setAttribute('data-countdown', countDownTime);

    var timeNow = new Date().getTime();
      var difference = countDownTime - timeNow;
      var days = Math.floor(difference / (1000 * 60 * 60 * 24));
      var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((difference % (1000 * 60)) / 1000);

      res = days + ":" + hours + ":" + minutes + ":" + seconds;
    elAppear.innerText = res;
  }
}, 1000);