将数组中的每个元素显示到 DOM答案

【问题标题】：Display each element in array to DOM将数组中的每个元素显示到 DOM
【发布时间】：2021-11-25 05:14:47
【问题描述】：

我正在制作一个倒数计时器，但遇到了一个问题，无法让它以我想要的方式显示。我想分解天数、小时数和分钟数，并将它们显示为各自的数字。否则显示为一个整数。这就是我希望它的样子：

问题是当我向 DOM 显示数据时，我只得到数组中的最后一项。如何让整个时间显示为单个数字？

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 daysNumber = days.toString();
  let daysDigits = [];
  for (var i = 0, len = daysNumber.length; i < len; i += 1) {
    daysDigits.push(+daysNumber.charAt(i));
  };

  Array.prototype.forEach.call(daysDigits, digit => {
    document.querySelector('.days').innerHTML = `<span class="digit">${digit}</span>`
  });

  console.log("days in digits " + daysDigits);

  let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let hoursNumber = hours.toString();
  let hoursDigits = [];
  for (var i = 0, len = hoursNumber.length; i < len; i += 1) {
    hoursDigits.push(+hoursNumber.charAt(i));
  }

  Array.prototype.forEach.call(hoursDigits, digit => {
    document.querySelector('.hours').innerHTML = `<span class="digit">${digit}</span>`

  });

  console.log("hours in digits " + hoursDigits);

  let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  let minutesNumber = minutes.toString();
  let minutesDigits = [];
  for (var i = 0, len = minutesNumber.length; i < len; i += 1) {
    minutesDigits.push(+minutesNumber.charAt(i));
  }

  Array.prototype.forEach.call(minutesDigits, digit => {
    document.querySelector('.minutes').innerHTML = `<span class="digit">${digit}</span>`
  });
  console.log("minutes in digits " + minutesDigits);


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

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

【问题讨论】：

当变量为数组时，不需要使用Array.prototype.foreach.call()。只需使用hoursDigits.forEach(...)
@Barmar 我最初使用它，但我一直在控制台中收到一个错误，它不是一个函数。
你一定是搞错了。我已经在我的回答中使用了它，这很好。

标签： javascript arrays dom

【解决方案1】：

您每次都通过forEach 循环覆盖innerHTML，而不是附加到它。

您需要先清空 DIV，然后连接每个数字。

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 daysNumber = days.toString();
  let daysDigits = [];
  for (var i = 0, len = daysNumber.length; i < len; i += 1) {
    daysDigits.push(+daysNumber.charAt(i));
  };

  document.querySelector(".days").innerHTML = "";
  daysDigits.forEach(digit => {
    document.querySelector('.days').innerHTML += `<span class="digit">${digit}</span>`
  });

  console.log("days in digits " + daysDigits);

  let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let hoursNumber = hours.toString();
  let hoursDigits = [];
  for (var i = 0, len = hoursNumber.length; i < len; i += 1) {
    hoursDigits.push(+hoursNumber.charAt(i));
  }

  document.querySelector('.hours').innerHTML = "";
  hoursDigits.forEach(digit => {
    document.querySelector('.hours').innerHTML += `<span class="digit">${digit}</span>`

  });

  console.log("hours in digits " + hoursDigits);

  let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  let minutesNumber = minutes.toString();
  let minutesDigits = [];
  for (var i = 0, len = minutesNumber.length; i < len; i += 1) {
    minutesDigits.push(+minutesNumber.charAt(i));
  }

  document.querySelector('.minutes').innerHTML = "";
  minutesDigits.forEach(digit => {
    document.querySelector('.minutes').innerHTML += `<span class="digit">${digit}</span>`
  });
  console.log("minutes in digits " + minutesDigits);


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

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

【讨论】：

【解决方案2】：

两个问题：

确保字符串中有 2 位数字：如果需要，请在前面加上“0”
首先生成span元素，然后将它们连接成一个字符串分配给innerHTML，而不是在每次迭代中覆盖innerHTML

例如小时数：

let hoursNumber = hours.toString().padStart(2, "0");
                               // ^^^^^^^^^^^^^^^^

以及设置innerHTML的循环：

document.querySelector('.hours').innerHTML = hoursDigits.map(digit =>
  `<span class="digit">${digit}<\/span>`
).join("");

【讨论】：