试图制作一个计时器，但“天”这个词没有出现答案

【问题标题】：trying to make a count up timer and it the word "days" isnt showing up试图制作一个计时器，但“天”这个词没有出现
【发布时间】：2022-12-11 17:10:23
【问题描述】：

我正在尝试计时，但屏幕上似乎不想显示天数

HTML

<div class="countup" id="countup1">
<div class="yrs"><span class="timeel years">00</span><span class="countupYrs">YRS</span></div> |
<div class="days"><span class="timeel days">00</span><span class="countupDays">DAYS</span></div> |
<div class="hrs"><span class="timeel hours">00</span><span class="countupHrs">HRS</span></div> |
<div class="mins"><span class="timeel minutes">00</span><span class="countupMins">MINS</span></div> |
<div class="secs"><span class="timeel seconds">00</span><span class="countupSecs">SECS</span></div>
                    </div>

window.onload = function () {
    countUpFromTime("Dec 25, 2021 13:20:00", 'countup1');
};
function countUpFromTime(countFrom, id) {
    countFrom = new Date(countFrom).getTime();
    var now = new Date(),
        countFrom = new Date(countFrom),
        timeDifference = (now - countFrom);

    var secondsInADay = 60 * 60 * 1000 * 24,
        secondsInAHour = 60 * 60 * 1000;

    days = Math.floor(timeDifference / (secondsInADay) * 1);
    years = Math.floor(days / 365);
    if (years > 1) { days = days - (years * 365) }
    hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
    mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
    secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);

    var idEl = document.getElementById(id);
    idEl.getElementsByClassName('years')[0].innerHTML = years;
    idEl.getElementsByClassName('days')[0].innerHTML = days;
    idEl.getElementsByClassName('hours')[0].innerHTML = hours;
    idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
    idEl.getElementsByClassName('seconds')[0].innerHTML = secs;

    clearTimeout(countUpFromTime.interval);
    countUpFromTime.interval = setTimeout(function () { countUpFromTime(countFrom, id); }, 1000);
}

我试过做

<div class="days"><span class="timeel days">00</span><span id="countupDays" class="countupDays">DAYS</span></div>

document.getElementById('countupDays').innerHTML = "DAYS";

添加“天”这个词，但这没有用，因为计时器会停止计数

【问题讨论】：

您的所有元素都没有 ID element，因此您的尝试不会找到任何要更新的元素。您要更新哪个元素？
@mykaf 我用它作为例子，意识到人们会感到困惑，现在更新了
你有两个元素 class="days": <div class="days"><span class="timeel days">00</span><span class="countupDays">DAYS</span></div>;第一个是你的目标元素的容器，所以它的 innerHTML 正在更新而不是“.timeel.days”
仅供参考：idEl.getElementsByClassName('years')[0].innerHTML 不是好的代码有两个原因。 1) getElementsByClassName() should be avoided（特别是如果您实际上对获取节点列表不感兴趣）和 2) .innerHTML should be avoided（如果可能）出于性能和安全考虑（改用 .textContent）。

标签： javascript html

【解决方案1】：

这是因为你的外部元素有 days 类的副作用

window.onload = function() {
  countUpFromTime("Dec 25, 2021 13:20:00", 'countup1');
};

function countUpFromTime(countFrom, id) {
  countFrom = new Date(countFrom).getTime();
  var now = new Date(),
    countFrom = new Date(countFrom),
    timeDifference = (now - countFrom);

  var secondsInADay = 60 * 60 * 1000 * 24,
    secondsInAHour = 60 * 60 * 1000;

  days = Math.floor(timeDifference / (secondsInADay) * 1);
  years = Math.floor(days / 365);
  if (years > 1) {
    days = days - (years * 365)
  }
  hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
  mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
  secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);

  var idEl = document.getElementById(id);
  idEl.getElementsByClassName('years')[0].innerHTML = years;
  idEl.getElementsByClassName('days')[0].innerHTML = days;
  idEl.getElementsByClassName('hours')[0].innerHTML = hours;
  idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
  idEl.getElementsByClassName('seconds')[0].innerHTML = secs;

  clearTimeout(countUpFromTime.interval);
  countUpFromTime.interval = setTimeout(function() {
    countUpFromTime(countFrom, id);
  }, 1000);
}

<div class="countup" id="countup1">
  <div class="yrs"><span class="timeel years">00</span><span class="countupYrs">YRS</span></div> |
  <div class="days-unique-name"><span class="timeel days">00</span><span class="countupDays">DAYS</span></div> |
  <div class="hrs"><span class="timeel hours">00</span><span class="countupHrs">HRS</span></div> |
  <div class="mins"><span class="timeel minutes">00</span><span class="countupMins">MINS</span></div> |
  <div class="secs"><span class="timeel seconds">00</span><span class="countupSecs">SECS</span></div>
</div>

【讨论】：

虽然您的答案在技术上是正确的，但更好的方法是修复 CSS 选择而不是弄乱 HTML。 document.querySelector(`#${id} > span.days`).innerHTML = days 消除了歧义。
在这种情况下，最好修复模棱两可的 html，即使以更改 css 为代价。这是为了保持一致性。并防止模棱两可的html。
更正：document.querySelector(`#${'countup1'} span.days`).innerHTML = days
除了新的 HTML 显然不统一。 .days-unique-name 元素不同于计数器组件的所有其他元素。（但是，是的，首先 HTML 总体设计不佳 - 但它并不含糊。使用的选择方法是）

【解决方案2】：

问题实际上是您如何选择元素。因为类 days 有多个元素，使用 getElementsByClass 返回多个元素，所以 idEl.getElementsByClassName('days')[0] 选择了 div，而不是 span。您可以考虑从 HTML 中删除不需要的类，但实际上完全有可能使用正确的选择器选择正确的元素。

这是一个这样做的版本（也使用setInterval而不是setTimeout）

var timeoutId

window.onload = function () {
  timeoutId = countUpFromTime("Dec 25, 2021 13:20:00", 'countup1')
};

function countUpFromTime(from, id) {
  const secondsInADay = 60 * 60 * 1000 * 24,
        secondsInAHour = 60 * 60 * 1000;

  const countFrom = new Date(from).getTime();

  // The keys of counter are the class names of the spans that should contain the result of the value method
  const counter = {
    days: (timeDifference) => ( Math.floor(timeDifference / (secondsInADay) * 1) % 365 ),
    years: (timeDifference) => Math.floor(Math.floor(timeDifference / (secondsInADay) * 1) / 365),
    hours: (timeDifference) => Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1),
    minutes: (timeDifference) => Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1),
    seconds: (timeDifference) => Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1)
  }

  return setInterval( () => {
    let now = new Date(),
        timeDifference = (now - new Date(countFrom));

    for (const [key, value] of Object.entries(counter)) {
      document.querySelector(`#${id} span.${key}`).innerHTML = value(timeDifference)
    }
  }, 1)
}

<body>
<div class="countup" id="countup1">
<div class="yrs"><span class="timeel years">00</span><span class="countupYrs">YRS</span></div> |
<div class="days"><span class="timeel days">00</span><span class="countupDays">DAYS</span></div> |
<div class="hrs"><span class="timeel hours">00</span><span class="countupHrs">HRS</span></div> |
<div class="mins"><span class="timeel minutes">00</span><span class="countupMins">MINS</span></div> |
<div class="secs"><span class="timeel seconds">00</span><span class="countupSecs">SECS</span></div>
</div>

【讨论】：