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

问题描述

我正在尝试在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>

解决方法

您需要使用元素数组，并且foreach元素更改文本。但是最好为指定future

创建Class或function

您的带有计时器数组的演示： 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>

我用`querySelectorAll（）作了一个工作示例，并对其进行了循环。

注意：您还需要将div的ID更改为类，将CSS中的de id选择器更改为类选择器。

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()',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>

您可以从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()',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>

使用类名进行选择时，这是@CBroe试图说的：

@Entity

countdown javascript