Ich versuche, diesen Countdown auf einer WordPress-Seite zu verwenden:

https://codepen.io/varzin/pen/rFfhH

Es funktioniert weiter, aber ich muss es mehrmals auf derselben Seite verwenden.

document.getElementById("timer")

Ich habe versucht, zu document.getElementsbyClassName("timer") zu wechseln, aber es hat nicht funktioniert.

Vermisse ich etwas?

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>
0
Fred Peres 19 Aug. 2020 im 15:41

4 Antworten

Beste Antwort

Sie müssen Array of Elements verwenden und für jeden Elementänderungstext. Erstellen Sie jedoch besser eine Klasse oder Funktion, um future anzugeben.

Ihre Demo mit einer Reihe von Timern: 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>
1
mplungjan 19 Aug. 2020 im 13:07

Bei der Arbeit mit der Auswahl nach Klassennamen versuchte @CBroe Folgendes zu sagen:

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>' ;
});
-2
Dev Yego 19 Aug. 2020 im 19:19

Sie können den Wert von den divs erhalten

Dieser Code ermöglicht verschiedene Timer auf der Seite

Setzen Sie auf alle Divs die gleiche Zeit, um den gleichen Timer zu erhalten

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>
0
mplungjan 20 Aug. 2020 im 11:58

Ich habe ein funktionierendes Beispiel mit `querySelectorAll () erstellt und es durchlaufen.

Hinweis: Sie müssen auch die ID des div in eine Klasse und den ID-Selektor im CSS in einen Klassenselektor ändern.

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>
0
Mark Baijens 19 Aug. 2020 im 12:52