Wie kann ich einen Countdown nur in HTML machen?

Question

Ich würde meiner Website gerne einen Countdown beifügen - wie kann ich das bewerkstelligen? Im Internet konnte ich leider nur Beispiele mit JavaScript finden...

Answer 1

Alleine mit HTML wirst Du da nicht weit kommen. Und das ist auch gut so! Architektonisch hat man sich bei der Aufteilung in HTML, PHP, CSS und JS schon etwas gedacht. Ich unterstelle Dir einfach mal, dass Du damit Deinen Besuchern ein "rundum sorglos"-Paket schnüren möchtest, weil man nicht auf die clientseitige Ausführung von Code angewiesen ist.

Eine mögliche Lösung findest Du hier.

Diese benötigt aber Compass und Ruby.

Comments

Danke, das habe ich schon befürchtet! Schade, dass alles, was ich machen möchte, Java mit einbezieht. Ich werde einmal meinem Lehrer fragen, ob ich auch damit arbeiten darf, um meine Ideen umzusetzen. Nur HTML und CSS reichen für eine komplexe Webseite nicht...

---

Bitte verwechsle Java und JS (JavaScript) nicht. Das sind zwei sehr unterschiedliche Programmiersprachen und auch deren Einsatzbereiche überschneiden sich nur marginal.

---

Ja, ich meine JS.

Answer 2

Es gibt tatsächlich eine Möglichkeit, den Countdown direkt in HTML und CSS - ohne Javascript - zu erstellen.

Dazu werden alle Ziffern von 0 bis 9 ins HTML gepackt und mit CSS wird ihr Anzeige gesteuert. Der folgende Code zeigt, wie eine Ziffer jede Sekunde in Richtung y verschoben wird (also in den sichtbaren Bereich):

@keyframes seconds-ones {
  0% {
    transform: translateY(-180px);
  }
  10% {
    transform: translateY(-360px);
  }
  20% {
    transform: translateY(-540px);
  }
  30% {
    transform: translateY(-720px);
  }
  40% {
    transform: translateY(-900px);
  }
  50% {
    transform: translateY(-1080px);
  }
  60% {
    transform: translateY(-1260px);
  }
  70% {
    transform: translateY(-1440px);
  }
  80% {
    transform: translateY(-1620px);
  }
  90% {
    transform: translateY(-1800px);
  }
}

.time-part.seconds.ones .digit-wrapper {
  animation-name: seconds-ones;
  animation-duration: 10s; /* 10 Ziffern in 10 Sekunden zeigen, also 1 Ziffer je Sekunde */
  animation-iteration-count: 360; /* 360 Durchgänge */
}

Hier das Fiddle:

https://jsfiddle.net/kai_noack/rgpf8Ly9/4/

Comments

Super, vielleicht lernt der Lehrer dann auch noch was dazu!

---

Ich würde es gerne so haben, dass die ersten beiden Digits in Tagen, die beiden danach in Stunden und die danach in Minuten läuft. Wie kann ich das hinbekommen?

---

Dazu musst du die Digits im HTML anpassen sowie die Keyframes und die Animationswerte. Hier für 30 Tage:

https://jsfiddle.net/kai_noack/Lgz59cmb/52/

Problem ist nur, dass wir die Ziffern 0 bis 9 benötigen für die Stunden, unser Zähler jedoch bei 24 Stunden beginnen sollte. Daher zählt der Zähler 30 Stunden je Tag, was nicht korrekt ist.

Die Keyframes müssen im Fiddle auch noch angepasst werden...

---

Ok, das mache ich dann selbst. Vielen dank nochmal!