Double "if" 函数与 GetElementsByClassname 对抗

Question

在用户“AlwaysHelping”帮助我解决问题之前。这是我之前的问题：问题是我将 GetElementByID 更改为 GetElementsByClass 然后问题就开始了。

我需要当计数器达到零并且从事件开始 "started" 过去两个小时后，它会更改为 "Ended"

这是我的代码javascript

function t5am() {
// Set the date we're counting down to
// Year, Month ( 0 for January ), Day, Hour, Minute, Second, , Milliseconds
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//::::::::::::                                       ::::::::::::
//::::::::::::              5:00 AM                  ::::::::::::
//::::::::::::                                       ::::::::::::
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
//                                   (AAAA,MM,DD,HH,mm,S));
var countDownDate = new Date(Date.UTC(2020,05,29,12,00,00));

// Update the count down every 1 second
var x = setInterval(function () {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    // GMT/UTC Adjustment at the end of the function. 0 = GMT/UTC+0; 1 = GMT/UTC+1.
    var distance = countDownDate - now - (3600000 * 1);

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    for (const ele of document.getElementsByClassName("t5am")){
        ele.innerHTML = (days + "<span>d</span> " + hours + "<span>h</span> "
            + minutes + "<span>m</span> " + seconds + "<span>s</span><br />")
    }
    
    // If the count down is over, write some text
    if (distance < 0) {
        for (const ele of document.getElementsByClassName("t5am")) {
            ele.innerHTML = "<p class='live-text'>Live <i class='fa fa-circle faa-flash animated'></i></p> ";
        }
            if (distance + 7200000 < 0){
              ele.innerHTML = "Ended";  
            }
    }
}, 1000);
}t5am()`

有谁知道我怎样才能做到这一点？谢谢。

Answer 1

你没有在结束 if 上做 forEach - 这就是你的 ended 没有显示的原因是你没有 forEach 在 [= 的元素上14=].

此外，我使用 textContent 而不是 innerHTML。不推荐用于 innerHTML。您可以阅读更多相关信息 here

工作演示：https://jsfiddle.net/usmanmunir/e6zwpfu7/4/

运行下面的代码片段可以看到它的工作原理并且 ended 出现在所有 classNames

上

function t5am() {
  // Set the date we're counting down to
  // Year, Month ( 0 for January ), Day, Hour, Minute, Second, , Milliseconds
  //:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
  //::::::::::::                                       ::::::::::::
  //::::::::::::              5:00 AM                  ::::::::::::
  //::::::::::::                                       ::::::::::::
  //:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
  //                                   (AAAA,MM,DD,HH,mm,S));
  var countDownDate = new Date(Date.UTC(2020, 05, 29, 12, 00, 00));

  // Update the count down every 1 second
  var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();

    // Find the distance between now an the count down date
    // GMT/UTC Adjustment at the end of the function. 0 = GMT/UTC+0; 1 = GMT/UTC+1.
    var distance = countDownDate - now - (3600000 * 1);

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Output the result in an element with id="demo"
    for (const ele of document.getElementsByClassName("t5am")) {
      ele.innerHTML = (days + "<span>d</span> " + hours + "<span>h</span> " +
        minutes + "<span>m</span> " + seconds + "<span>s</span><br />")
    }

    // If the count down is over, write some text
    if (distance < 0) {
      for (const ele of document.getElementsByClassName("t5am")) {
        ele.textContent = "<p class='live-text'>Live <i class='fa fa-circle faa-flash animated'></i></p> ";
      }
      if (distance + 7200000 < 0) {
        for (const allEllements of document.getElementsByClassName("t5am")) {
          allEllements.textContent = "Ended";
        }
      }
    }
  }, 1000);
}

t5am()

<div class="t5am"></div>


<div class="t5am"></div>


<div class="t5am"></div>

Double "if" 函数与 GetElementsByClassname 对抗

Double "if" function in counter with GetElementsByClass

javascript

html

countdown

countdowntimer