Countdown bis Weihnachten

So funktioniert das Script

Das Script erledigt drei Aufgaben: Es legt die Stichtage fest, sucht sich beim Laden den passenden Begleittext heraus und lässt danach eine Funktion in kurzen Abständen immer wieder laufen, die die Restzeit ausrechnet und anzeigt. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts auf derselben Seite kollidieren.

const jahr = jetzt.getFullYear();
const heiligabend    = new Date(Date.UTC(jahr, 11, 23, 23, 0, 0));
const ersterFeiertag = new Date(Date.UTC(jahr, 11, 24, 23, 0, 0));

Zuerst holt sich das Script mit getFullYear() die aktuelle Jahreszahl — daher passt sich der Countdown jedes Jahr von selbst an. Aus dem Jahr werden dann die Stichtage gebaut. Date.UTC(…) setzt einen Zeitpunkt aus Jahr, Monat, Tag und Uhrzeit in Weltzeit zusammen. Achtet auf die 11: JavaScript zählt die Monate von 0 (Januar) bis 11 (Dezember). Das Original schrieb den Monat noch als englisches Wort in eine Zeichenkette ("December 23, …"); die Variante mit Zahlen versteht jeder Browser gleich und braucht kein Englisch.

if (jetzt < heiligabend) {
  vortext.textContent = "Bis Heilig Abend sind es noch";
} else if (jetzt < ersterFeiertag) {
  vortext.textContent = "Heute ist Heilig Abend und es sind noch";
  nachtext.textContent = "bis zum Ersten Weihnachtstag";
}

Zwei Datumswerte lassen sich in JavaScript direkt mit < vergleichen — dabei wird intern ihr Zeitstempel verglichen, also die Zahl der Millisekunden seit dem 1. Januar 1970. Die else if-Kette arbeitet die Stichtage der Reihe nach ab und schreibt den passenden Satz in die Ausgabe. Weil die Kette lückenlos vom frühesten zum spätesten Zeitpunkt läuft, trifft immer genau ein Zweig zu — auch am 24. Dezember um drei Uhr morgens.

function restzeit() {
  const stichtage = [heiligabend, ersterFeiertag, zweiterFeiertag];
  for (let i = 0; i < stichtage.length; i++) {
    const rest = stichtage[i].getTime() - Date.now();
    if (rest > 0) {
      return rest;
    }
  }
  return 0;
}

Diese Funktion sucht den nächsten Termin, der noch in der Zukunft liegt. Date.now() liefert den aktuellen Zeitstempel in Millisekunden, getTime() denselben Wert für einen Stichtag. Die Differenz ist die verbleibende Zeit. Ist sie größer als 0, liegt der Termin noch vor uns und wird zurückgegeben; sonst geht die Schleife zum nächsten weiter. Dadurch springt der Countdown in der Weihnachtsnacht von selbst auf den nächsten Feiertag um, ohne dass die Seite neu geladen werden muss.

rest = Math.floor(rest / 1000);
const sekunden = rest % 60;
rest = Math.floor(rest / 60);
const minuten = rest % 60;

Aus den Millisekunden werden Sekunden, Minuten, Stunden und Tage. Der Trick ist immer derselbe: Der Rest der Division (%, gesprochen „Modulo") liefert den Anteil einer Einheit, und Math.floor(… / 60) teilt den Wert auf die nächstgrößere Einheit herunter und rundet dabei ab. Nach vier solchen Schritten bleibt die Zahl der ganzen Tage übrig.

if (tage > 0) {
  zeitfeld.textContent = (tage + 1) + " Tage";
} else {
  zeitfeld.innerHTML =
    zweistellig(stunden) + " Stunden<br>" +
    zweistellig(minuten) + " Minuten<br>" +
    zweistellig(sekunden) + " Sekunden";
}

Solange mehr als ein Tag übrig ist, genügt die Tagesangabe. Das + 1 stammt aus dem Original und zählt den angebrochenen heutigen Tag mit — sonst stünde am Morgen des 23. Dezember eine 0 da. Am letzten Tag wird es genauer: Dann erscheinen Stunden, Minuten und Sekunden untereinander. Die Hilfsfunktion zweistellig() benutzt padStart(2, "0") und macht aus einer 7 die Anzeige 07, damit die Zahlen nicht hin und her springen.

setTimeout(countdown, 50);

setTimeout ruft die Funktion nach der angegebenen Zahl von Millisekunden noch einmal auf — die Funktion startet sich also selbst immer wieder neu und die Anzeige bleibt aktuell. Das Original übergab hier den Funktionsnamen als Text ("countdown()"), was den Browser zwingt, die Zeichenkette jedes Mal als Code auszuwerten. Der Funktionsname ohne Anführungszeichen und ohne Klammern ist die saubere Schreibweise. Ist gar keine Restzeit mehr übrig, wird die Zeile nicht erreicht und die Schleife hört von allein auf.

Zum Anpassen: Die vier Stichtage stehen alle oben beieinander — wer den Countdown lieber auf Nikolaus laufen lassen will, ändert die Zahlen zu Date.UTC(jahr, 11, 5, 23, 0, 0) und passt die Sätze darunter an. Die Farbe und die Größe der Zahl regelt im Einbau-Code das kleine <style>-Element.