Javascript 特定日期的倒计时

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

getElementsByClassName

工作（在我看来）。如果我使用

getElementById

并更改id为“”的HTML标记

我的全部代码可在此处找到：

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

HTML:

---

非常感谢您的帮助。

更改为

文档。GetElementsByCassName（“出现”）[0]。innerHTML=res

还更新了

var articleDate = document.getElementsByClassName("date")[0].innerHTML;
var articleTime = document.getElementsByClassName("time")[0].innerHTML;

因为
document.getElementsByClassName（“出现”）
只有DOM元素，而
document.getElementsByClassName
返回元素数组，需要innerHTML来获取值。
按类别划分的元素
document.getElementsByClassName（“出现”）
返回元素的集合。您可以使用以下代码对其进行迭代

const appears = document.getElementsByClassName("appear");
for (var i = 0; i < appears.length; i++) {
  appears.item(i).innerHTML = res;
}

2019-04-13

21:21

像这样更改代码。使用document.getElementsByClassName（“日期”）[0].textContent获取值

//Fångar upp信息来自artiklens数据och tid
var articleDate=document.getElementsByClassName（“日期”）[0].textContent；
var articleTime=document.getElementsByClassName（“时间”）[0].textContent；
var总计=articleDate+'T'+articleTime+'：00'；
var countdown=新日期（总计）.getTime（）；
var x=setInterval（函数（）{
var timeNow=new Date（）.getTime（）；
var差异=countDownTime-timeNow；
var天数=数学下限（差值/（1000*60*60*24））；
可变小时数=数学下限（（差异%（1000*60*60*24））/（1000*60*60））；
风险值分钟数=数学下限（（差异%（1000*60*60））/（1000*60））；
变量秒=数学地板（（差值%（1000*60））/1000）；
res=天+“：“+小时+”：“+分钟+”：“+秒；
document.getElementsByClassName（“出现”）[0].textContent=res；
}, 1000);
2019-04-13

21:21

“我需要类函数，因为我将在 在我的HTML文件中，我希望将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);

2019-04-13

21:21

2019-04-13

10:21

setInterval（函数（）{ var articlelements=document.getElementsByClassName（“日期”）； 对于（var i=0；i

var total=articleDate+'T'+articledtime+'：00'const appears = document.getElementsByClassName("appear");
for (var i = 0; i < appears.length; i++) {
  appears.item(i).innerHTML = res;
}

<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);