Definierbarer Countdown

So funktioniert das Script

Das Script hat drei Bestandteile: eine Liste mit den Schritten, eine Funktion, die einmal pro Sekunde aufgerufen wird und herunterzählt, und eine Startfunktion, die alles auf Anfang setzt. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts auf derselben Seite kollidieren.

const schritte = [
  { sekunden: 10, text: "Dieser Text wird angezeigt.", farbe: "#000000", groesse: "2.1em", schrift: "Comic Sans MS" },
  { sekunden: 11, text: "Zweiter Text", farbe: "#0000FF", groesse: "2.0em", schrift: "Arial" },
  …
];

Das ist die gesamte Konfiguration. schritte ist ein Array — eine nummerierte Liste — und jeder Eintrag darin ist ein Objekt: eine Sammlung benannter Werte in geschweiften Klammern. Ein Schritt weiß also selbst, wie lange er dauert (sekunden), was danach erscheint (text) und wie das aussehen soll. Wollt ihr einen achten Schritt, schreibt ihr eine weitere Zeile in die Liste; wollt ihr nur drei, löscht ihr die überzähligen. Eine separate Angabe der Anzahl braucht es nicht, das Script fragt die Liste über schritte.length selbst.

const starttext = feldText.innerHTML;
let aktuell = 0;
let rest = 0;
let uhr = null;

Diese vier Werte bilden den Zustand des Countdowns. aktuell merkt sich, welcher Schritt gerade läuft (die Zählung beginnt bei 0, weil Arrays in JavaScript beim Index 0 anfangen), rest die noch verbleibenden Sekunden und uhr die Kennnummer des laufenden Zeitgebers. starttext sichert den Text, der vor dem ersten Wechsel im HTML steht — nur so kann der Neustart-Knopf ihn später wiederherstellen. const steht für Werte, die sich nie ändern, let für solche, die weitergezählt werden.

function ticken() {
  rest--;
  if (rest > 0) {
    zeitAnzeigen(rest);
    uhr = setTimeout(ticken, 1000);
    return;
  }

Das ist das Herz des Scripts. rest-- zieht eine Sekunde ab. Sind danach noch welche übrig, wird die neue Zahl angezeigt und mit setTimeout(ticken, 1000) ein Wecker gestellt: „Rufe die Funktion ticken in 1000 Millisekunden, also in einer Sekunde, noch einmal auf.“ Die Funktion ruft sich damit immer wieder selbst auf — das ist der Motor der Uhr. return beendet den Durchlauf an dieser Stelle, der Rest der Funktion wird dann übersprungen.

const schritt = schritte[aktuell];
feldText.innerHTML =
  "<span style='color:" + schritt.farbe +
  "; font-size:" + schritt.groesse +
  "; font-family:" + schritt.schrift + ";'>" + schritt.text + "</span>";

Ist die Restzeit auf 0 gefallen, wird der fällige Schritt aus der Liste geholt und angezeigt. Das Script baut dazu aus den Angaben ein <span>-Element mit einem style-Attribut zusammen und setzt es per innerHTML in den Textbereich. innerHTML heißt: Der Text wird als HTML verstanden — deshalb darf im Feld text auch ein Link stehen, wie im dritten Schritt des Beispiels.

aktuell++;
if (aktuell >= schritte.length) {
  feldZeit.textContent = "";
  return;
}
rest = schritte[aktuell].sekunden;

Danach rückt aktuell um eins weiter. Gibt es keinen weiteren Schritt mehr — aktuell ist so groß wie die Länge der Liste —, wird die Sekundenanzeige geleert und die Kette endet: Ohne neues setTimeout läuft nichts mehr. Sonst wird die Restzeit mit der Wartezeit des nächsten Schritts neu geladen und weitergezählt.

function zeitAnzeigen(sekunden) {
  feldZeit.textContent = sekunden < 10 ? "0" + sekunden : String(sekunden);
}

Die kleine Hilfsfunktion sorgt für die führende Null bei einstelligen Zahlen, damit die Anzeige nicht zwischen zwei und einer Stelle hin- und herspringt. Das Fragezeichen mit dem Doppelpunkt ist der Bedingungsoperator: Vor dem Fragezeichen steht die Bedingung, dahinter der Wert für „trifft zu“, nach dem Doppelpunkt der für „trifft nicht zu“ — eine Kurzschreibweise für ein if mit else.

function starten() {
  clearTimeout(uhr);
  aktuell = 0;
  rest = schritte[0].sekunden;
  feldText.innerHTML = starttext;
  ticken();
}

starten() setzt alle Zähler zurück und stellt den ursprünglichen Text wieder her. Wichtig ist die erste Zeile: clearTimeout(uhr) stoppt einen eventuell noch laufenden Wecker. Ohne sie würden nach zwei Klicks auf den Knopf zwei Ketten gleichzeitig ticken und die Anzeige flackern. Ganz unten im Script wird starten einmal direkt aufgerufen — deshalb läuft der Countdown sofort beim Laden der Seite los — und zusätzlich per addEventListener mit dem Knopf verbunden.

Zum Anpassen: Alles Wesentliche steckt in der Liste schritte. Die Zeiten sind Sekunden, die Farben normale CSS-Farbwerte (auch Namen wie "darkred" gehen), die Größen CSS-Angaben — statt "5.1em" könnt ihr auch "32px" schreiben. Wenn ihr die Sekundenanzeige gar nicht wollt, lasst ihr das Element mit der id="cd-zeit" einfach weg; dann müsst ihr allerdings auch die drei Zeilen entfernen, die darauf zugreifen.