时间戳

首页 > 解决方案 > 将数组中的每个元素显示到 DOM

javascript - 将数组中的每个元素显示到 DOM

问题描述

我正在制作一个倒数计时器并遇到一个问题，让它以我想要的方式显示。我想分解天数、小时数和分钟数，并将它们分别显示为自己的数字。否则显示为一个整数。这就是我希望它看起来的样子： 在此处输入图像描述

问题是当我向 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>

标签： javascriptarraysdom

解决方案

两个问题：

  • 确保您的字符串中有 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("");

推荐阅读