单页多次展示JS倒计时，使用getElementsByClassName不显示如何解决

document.getElementsByClassName() 方法返回的是 HTMLCollection 类数组对象，并非单个DOM元素，该对象本身没有innerHTML属性，因此直接赋值不会生效，页面也就没有内容显示。

你只需要先获取所有class为demo的元素，再遍历集合中的每一个元素，分别为其设置内容即可，修改后的代码如下：

HTML代码 #

<!-- 可重复添加多个同class的标签，所有标签都会同步展示倒计时 -->
<p class="demo"></p>
<p class="demo"></p>
<p class="demo"></p>

JS代码 #

// 设置倒计时的目标时间
var countDownDate = new Date("Jan 5, 2022 15:37:25").getTime();

// 每1秒更新一次倒计时
var x = setInterval(function() {

  // 获取当前时间戳
  var now = new Date().getTime();
    
  // 计算当前时间和目标时间的差值
  var distance = countDownDate - now;
    
  // 时间差换算为天、时、分、秒
  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);
    
  // 生成要展示的倒计时文本
  var showText = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
  // 获取所有class为demo的元素，遍历逐个赋值
  var demoElements = document.getElementsByClassName("demo");
  for(var i = 0; i < demoElements.length; i++) {
    demoElements[i].innerHTML = showText;
  }
    
  // 倒计时结束后的处理逻辑
  if (distance < 0) {
    clearInterval(x);
    var expiredText = "已过期";
    for(var i = 0; i < demoElements.length; i++) {
      demoElements[i].innerHTML = expiredText;
    }
  }
}, 1000);

内容的提问来源于stack exchange，提问作者Warkus