將陣列中的每個元素顯示到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 >${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 >${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 >${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>

uj5u.com熱心網友回復：

您innerHTML每次都在forEach回圈中覆寫，而不是附加到它。

您需要先清空 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 >${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 >${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 >${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>

uj5u.com熱心網友回復：

兩個問題：

• 確保您的字串中有 2 位數字：因此，如果需要，請在前面加上“0”

• 首先生成span元素，然后將它們連接成一個字串分配給innerHTML，而不是在每次迭代中覆寫innerHTML

因此，例如小時：

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

以及要設定的回圈innerHTML：

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

標籤：javascript 数组 dom

上一篇：如何檢查按鈕是否按正確順序按下？

下一篇：Dart中是否有等效于Javascript的`resolve`函式（來自Promise建構式）？