按类别的元素

Question

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

getElementsByClassName

上班（我认为）。如果我使用

，则WHOLE程序将正常运行

getElementById

并使用id =“” ...

更改HTML标记

我的完整代码在这里：https://jsfiddle.net/f1kzL78h/5/

我需要class函数，因为将来我的HTML文件中将有更多p-tag，并且我想将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);

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

Answer 1

更改为document.getElementsByClassName("appear")[0].innerHTML = res;

也更新

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

因为只有document.getElementsByClassName("appear")个DOM元素和document.getElementsByClassName返回该元素的数组，所以需要innerHTML来获取值。 https://jsfiddle.net/viethien/8mxh0zkr/3/

Answer 2

按类别的元素

document.getElementsByClassName("appear")返回元素的集合。您可以使用以下代码对其进行迭代

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

从HTML获取日期

您使用的var articleDate = document.getElementsByClassName("date");未返回预期值

您应该使用var articleDate = document.getElementsByClassName("date")[0].innerHTML;来获取元素内部的值

您的情况

// Fångar upp information om artiklens datum och tid

var articleDate = document.getElementsByClassName("date")[0].innerHTML;
var articleTime = document.getElementsByClassName("time")[0].innerHTML;

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;

  const appears = document.getElementsByClassName("appear");
  for (var i = 0; i < appears.length; i++) {
    appears.item(i).innerHTML = res;
  }

}, 1000);

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

Answer 3

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

// Fångar upp information om artiklens datum och tid
var articleDate = document.getElementsByClassName("date")[0].textContent;
var articleTime = document.getElementsByClassName("time")[0].textContent;

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")[0].textContent = res;

}, 1000);

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

Answer 4

“我需要class函数，因为我将在其中添加更多p标签 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);

特定日期倒计时

4 个答案:

按类别的元素

从HTML获取日期

您的情况