JavaScript倒计时器拆分数字渲染DOM仅显示数组最后一项如何解决

问题原因 #

你在遍历天/时/分的数字数组时，每次循环都直接给对应DOM容器的innerHTML赋值，新的内容会直接覆盖上一轮循环写入的内容，所以最终只会显示数组的最后一位数字。

解决方法 #

提前把所有单个数字对应的<span>标签拼接成完整的字符串，再一次性赋值给对应容器的innerHTML即可，避免循环覆盖。你也可以额外增加补0逻辑，保证时、分固定为两位显示，更符合常规倒计时的展示习惯。

修改后代码 #

JS代码 #

let countDownDate = new Date("Jan 5, 2022 7:37:25").getTime();

const x = setInterval(function() {
  let now = new Date().getTime();
  const distance = countDownDate - now;

  // 天数处理
  let days = Math.floor(distance / (1000 * 60 * 60 * 24));
  let daysDigits = days.toString().split('').map(Number);
  // 拼接所有数字span
  let daysHtml = daysDigits.map(digit => `<span class="digit">${digit}</span>`).join('');
  document.querySelector('.days').innerHTML = daysHtml;

  // 小时处理 补0保证两位
  let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString().padStart(2, '0');
  let hoursDigits = hours.split('').map(Number);
  let hoursHtml = hoursDigits.map(digit => `<span class="digit">${digit}</span>`).join('');
  document.querySelector('.hours').innerHTML = hoursHtml;

  // 分钟处理 补0保证两位
  let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0');
  let minutesDigits = minutes.split('').map(Number);
  let minutesHtml = minutesDigits.map(digit => `<span class="digit">${digit}</span>`).join('');
  document.querySelector('.minutes').innerHTML = minutesHtml;

  if (distance < 0) {
    clearInterval(x);
    document.getElementById("timer").innerHTML = "EXPIRED";
  }
}, 1000);

HTML代码 #

<div class="grid grid--justify-around">
  <div class="grid__col--2 u-textAlignCenter">
    <div class="days">
    </div>
    <p class="u-textWeightBold">days</p>
  </div>
  <div class="grid__col--2 u-textAlignCenter">
    <div class="hours">
    </div>
    <p>hours</p>
  </div>
  <div class="grid__col--2 u-textAlignCenter">
    <div class="minutes">
    </div>
    <p>minutes</p>
  </div>
</div>

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