Silvester-Countdown

So funktioniert das Script

Das Script hat drei Teile: Es bestimmt das Zieldatum, es baut den Begleitsatz mit der Jahreszahl, und es lässt eine Funktion in kurzen Abständen immer wieder laufen, die die Restzeit ausrechnet und in die Anzeige schreibt. Alles zusammen steckt in einer sofort ausgeführten Funktion, damit die Variablennamen keine anderen Scripts der Seite stören.

let jahr = jetzt.getFullYear();
let silvester = new Date(Date.UTC(jahr, 11, 31, 23, 0, 0));

getFullYear() liefert das laufende Jahr aus der Uhr des Besuchers — deshalb muss die Jahreszahl nie von Hand gepflegt werden. Date.UTC(…) setzt daraus einen Zeitpunkt in Weltzeit zusammen: Jahr, Monat, Tag, Stunde, Minute, Sekunde. Die 11 ist der Dezember, denn JavaScript nummeriert die Monate von 0 bis 11. Das Original schrieb hier noch new Date("December 31, …") mit englischem Monatsnamen; die Schreibweise mit Zahlen versteht jeder Browser gleich.

if (silvester.getTime() <= jetzt.getTime()) {
  jahr = jahr + 1;
  silvester = new Date(Date.UTC(jahr, 11, 31, 23, 0, 0));
}

getTime() gibt einen Zeitpunkt als reine Zahl zurück: die Millisekunden seit dem 1. Januar 1970, dem Nullpunkt der Computer-Zeitrechnung. Zwei solche Zahlen lassen sich bequem vergleichen. Liegt das Ziel bereits hinter uns — das ist in der letzten Stunde des Jahres der Fall —, wird ein Jahr aufgeschlagen und der Countdown zeigt auf den übernächsten Jahreswechsel. Beim Original blieb die Anzeige in dieser Stunde leer.

function stellen(n, breite) {
  return String(n).padStart(breite, "0");
}

Diese kleine Hilfsfunktion sorgt für die feste Stellenzahl. String(n) macht aus der Zahl einen Text, padStart(breite, "0") füllt ihn vorn mit Nullen auf, bis er die gewünschte Länge hat: aus 7 wird 07, aus 42 wird 042. Ohne diesen Schritt würde die Anzeige bei jedem Stellenwechsel in der Breite springen. Das Original erledigte dasselbe mit zwei fast gleichen Funktionen und einer Reihe von if-Abfragen — padStart ist die heutige Kurzfassung.

const millisekunden = stellen(rest % 1000, 3);
rest = Math.floor(rest / 1000);
const sekunden = stellen(rest % 60, 2);
rest = Math.floor(rest / 60);

Hier wird die Restzeit zerlegt. Der Prozentoperator % („Modulo") liefert den Rest einer Division: rest % 1000 sind die Millisekunden, die über volle Sekunden hinausgehen. Anschließend teilt Math.floor(rest / 1000) den Wert in ganze Sekunden herunter — Math.floor rundet dabei immer ab. Dasselbe Paar aus Rest und Division wiederholt sich für Minuten, Stunden und Tage. Am Ende bleibt in rest die Zahl der vollen Tage übrig.

tagefeld.textContent = tage + " TAGE";
zeitfeld.textContent =
  stunden + ":" + minuten + ":" + sekunden + "." + millisekunden;

Die beiden Zeilen schreiben das Ergebnis in die vorbereiteten Elemente. textContent setzt reinen Text und ist dafür die richtige Wahl — das Original benutzte innerHTML, was den Browser jedes Mal HTML auswerten lässt, obwohl gar keins im Spiel ist.

setTimeout(countdown, 50);

Zum Schluss ruft sich die Funktion über setTimeout nach 50 Millisekunden selbst wieder auf. So entsteht die laufende Anzeige. 50 Millisekunden sind hier bewusst kurz gewählt, weil auch die Millisekundenstellen sichtbar sind; für eine Anzeige ohne sie würden 1000 genügen und den Rechner schonen. Ist die Restzeit auf null gelaufen, wird diese Zeile nicht mehr erreicht und die Schleife endet von selbst.

Zum Anpassen: Für ein anderes Ziel ändert ihr nur die Zahlen in Date.UTC(jahr, 11, 31, 23, 0, 0) — Monat 11 ist Dezember, 5 wäre der Juni. Die Beschriftung " TAGE" und der Satz mit der Jahreszahl stehen ebenfalls im Klartext im Code. Farbe und Größe der Zahlen regelt im Einbau-Code das kleine <style>-Element.