倒数计时器 - 在页面中多次使用

Question

我正在尝试在 wordpress 页面中使用这个倒计时：

它可以正常工作，但我需要在同一页面中多次使用它。

document.getElementById("timer")

我尝试更改为document.getElementsbyClassName("timer")，但没有成功。

我是不是漏掉了什么？

function updateTimer() {
  future = Date.parse("June 11, 2021 11:30:00");
  now = new Date();
  diff = future - now;

  days = Math.floor(diff / (1000 * 60 * 60 * 24));
  hours = Math.floor(diff / (1000 * 60 * 60));
  mins = Math.floor(diff / (1000 * 60));
  secs = Math.floor(diff / 1000);

  d = days;
  h = hours - days * 24;
  m = mins - hours * 60;
  s = secs - mins * 60;

  document.getElementById("timer")
    .innerHTML =
    '<div>' + d + '<span>days</span></div>' +
    '<div>' + h + '<span>hours</span></div>' +
    '<div>' + m + '<span>minutes</span></div>' +
    '<div>' + s + '<span>seconds</span></div>';
}
setInterval('updateTimer()', 1000);

body {
  text-align: center;
  padding: 70px 50px;
  background: #0D1A29;
  font-family: "Helvetica Neue", "Open Sans", helvetica, arial, sans-serif;
}

#timer {
  font-size: 3em;
  font-weight: 100;
  color: white;
  text-shadow: 0 0 20px #48C8FF;
  div {
    display: inline-block;
    min-width: 90px;
    span {
      color: #B1CDF1;
      display: block;
      font-size: .35em;
      font-weight: 400;
    }
  }
}

<div id="timer"></div>

Answer 1

在使用 class 名称进行选择时，@CBroe 想说的是：

Array.from(document.getElementsByClassName("timer")).forEach(el => {
    el.innerHTML =
      '<div>' + d + '<span>days</span></div>' +
      '<div>' + h + '<span>hours</span></div>' +
      '<div>' + m + '<span>minutes</span></div>' +
      '<div>' + s + '<span>seconds</span></div>' ;
});

Answer 2

我用 `querySelectorAll() 做了一个工作示例并循环它。

注意：您还需要将div的id更改为class并将css中的de id选择器更改为class 选择器。

function updateTimer() {
  console.log()
  future = Date.parse("June 11, 2020 11:30:00");
  now = new Date();
  diff = future - now;

  days = Math.floor(diff / (1000 * 60 * 60 * 24));
  hours = Math.floor(diff / (1000 * 60 * 60));
  mins = Math.floor(diff / (1000 * 60));
  secs = Math.floor(diff / 1000);

  d = days;
  h = hours - days * 24;
  m = mins - hours * 60;
  s = secs - mins * 60;

  document.querySelectorAll('.timer').forEach((el) => {
    el.innerHTML =
    '<div>' + d + '<span>days</span></div>' +
    '<div>' + h + '<span>hours</span></div>' +
    '<div>' + m + '<span>minutes</span></div>' +
    '<div>' + s + '<span>seconds</span></div>';
  });
    
}
setInterval('updateTimer()', 1000);

body {
  text-align: center;
  padding: 70px 50px;
  background: #0D1A29;
  font-family: "Helvetica Neue", "Open Sans", helvetica, arial, sans-serif;
}

.timer {
  font-size: 3em;
  font-weight: 100;
  color: white;
  text-shadow: 0 0 20px #48C8FF;
  div {
    display: inline-block;
    min-width: 90px;
    span {
      color: #B1CDF1;
      display: block;
      font-size: .35em;
      font-weight: 400;
    }
  }
}

<div class="timer"></div>
<br>
<div class="timer"></div>

Answer 3

您需要使用元素数组，并为每个元素更改文本。但最好创建 Class 或指定 future

的函数

您的带有计时器数组的演示： https://codepen.io/Nekiy2/pen/NWNRgPz

function updateTimer() {
  future = Date.parse("June 11, 2020 11:30:00");
  now = new Date();
  diff = future - now;

  days = Math.floor(diff / (1000 * 60 * 60 * 24));
  hours = Math.floor(diff / (1000 * 60 * 60));
  mins = Math.floor(diff / (1000 * 60));
  secs = Math.floor(diff / 1000);

  d = days;
  h = hours - days * 24;
  m = mins - hours * 60;
  s = secs - mins * 60;

  let timers = document.querySelectorAll('.timer')
  timers.forEach((e) => { // array of timers

    e.innerHTML =
      '<div>' + d + '<span>days</span></div>' +
      '<div>' + h + '<span>hours</span></div>' +
      '<div>' + m + '<span>minutes</span></div>' +
      '<div>' + s + '<span>seconds</span></div>';
  })
}
setInterval('updateTimer()', 1000);

body {
  text-align: center;
  padding: 70px 50px;
  background: #0D1A29;
  font-family: "Helvetica Neue", "Open Sans", helvetica, arial, sans-serif;
}

.timer {
  font-size: 3em;
  font-weight: 100;
  color: white;
  text-shadow: 0 0 20px #48C8FF;
  div {
    display: inline-block;
    min-width: 90px;
    span {
      color: #B1CDF1;
      display: block;
      font-size: .35em;
      font-weight: 400;
    }
  }
}

<div class="countdown timer"></div>
<div class="countdown timer"></div>

Answer 4

你可以从div中获取值

此代码允许页面上使用不同的计时器

在所有 div 上输入相同的时间以获得相同的计时器

function updateTimer() {
  [...document.querySelectorAll(".timer")].forEach(timer => {
    const future = Date.parse(timer.getAttribute("data-future"));
    const now = new Date();
    const diff = future - now;

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor(diff / (1000 * 60 * 60));
    const mins = Math.floor(diff / (1000 * 60));
    const secs = Math.floor(diff / 1000);

    h = hours - days * 24;
    m = mins - hours * 60;
    s = secs - mins * 60;

    timer.innerHTML = `<div>${days}<span>day${days===1?"":"s"}</span></div>
        <div>${h}<span>hour${h===1?"":"s"}</span></div>
        <div>${m}<span>minute${m===1?"":"s"}</span></div>
        <div>${s}<span>second${s===1?"":"s"}</span></div>`;
  })
}
setInterval('updateTimer()', 1000);

body {
  text-align: center;
  padding: 70px 50px;
  background: #0D1A29;
  font-family: "Helvetica Neue", "Open Sans", helvetica, arial, sans-serif;
}

.timer {
  font-size: 3em;
  font-weight: 100;
  color: white;
  text-shadow: 0 0 20px #48C8FF;
  div {
    display: inline-block;
    min-width: 90px;
    span {
      color: #B1CDF1;
      display: block;
      font-size: .35em;
      font-weight: 400;
    }
  }
}

<div class="timer" data-future="June 11, 2021 11:30:00"></div>
<hr/>
<div class="timer" data-future="May 2, 2021 14:30:00"></div>

倒数计时器 - 在页面中多次使用

Countdown timer - using several times in a page

javascript

countdown