Countdown

So funktioniert das Script

Das Script hat drei Aufgaben: Es merkt sich den Zieltermin, es rechnet den Abstand zwischen Jetzt und Ziel in Jahre, Monate, Tage, Stunden, Minuten und Sekunden um, und es wiederholt diese Rechnung im Sekundentakt. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts auf der Seite kollidieren.

const endJahr = 2030;    // Jahr
const endMonat = 2;      // Monat   (1-12)
const endTag = 15;       // Tag     (1-31)
const endStunde = 18;    // Stunde  (0-23)
const endMinute = 8;     // Minute  (0-59)
const endSekunde = 50;   // Sekunde (0-59)
const ENDE = "Beendet";  // Anzeige, wenn der Countdown beendet ist

Das ist der ganze Einstellbereich. Diese sieben Zeilen sind alles, was ihr anfassen müsst: sechs Zahlen für den Termin und ein Text für den Moment danach. const bedeutet „Konstante" — ein Wert, der sich während der Laufzeit nicht mehr ändert. Für Werte, die sich ändern, benutzt man stattdessen let.

const ende = new Date(endJahr, endMonat - 1, endTag, endStunde, endMinute, endSekunde);

Aus den sechs Zahlen wird ein Datumsobjekt. Aufgepasst beim - 1: JavaScript zählt die Monate von 0 (Januar) bis 11 (Dezember). Damit ihr oben trotzdem den gewohnten Monat 1 bis 12 eintragen dürft, zieht das Script hier eins ab. Im Originalscript fehlte dieser Schritt, weshalb der Countdown einen Monat zu spät ablief.

const JAHR = 31536000000; // 365 Tage in Millisekunden
const MONAT = JAHR / 12;
const TAG = JAHR / 365;
const STUNDE = TAG / 24;
const MINUTE = STUNDE / 60;
const SEKUNDE = MINUTE / 60;

JavaScript rechnet mit Zeit intern in Millisekunden, also Tausendstelsekunden. Damit die spätere Umrechnung übersichtlich bleibt, bekommt hier jede Zeiteinheit ihren Millisekundenwert: Ein Tag sind 86.400.000, eine Stunde 3.600.000, eine Sekunde 1.000. Weil die Werte auseinander abgeleitet werden, muss man nur die oberste Zahl verstehen — 365 Tage.

let rest = ende.getTime() - Date.now();

if (rest <= 0) {
  clearInterval(uhr);
  anzeige.textContent = ENDE;
  return;
}

Date.now() liefert den aktuellen Zeitpunkt in Millisekunden, ende.getTime() denselben Wert für den Zieltermin. Die Differenz ist die Restzeit. Ist sie null oder negativ, ist der Termin vorbei: clearInterval stoppt die Wiederholung, die Anzeige bekommt den Endtext, und return beendet die Funktion vorzeitig.

const jahre = Math.floor(rest / JAHR);
rest -= jahre * JAHR;
const monate = Math.floor(rest / MONAT);
rest -= monate * MONAT;

Hier steckt der eigentliche Kniff, und er wiederholt sich für jede Einheit: Wie viele volle Jahre passen in die Restzeit? Math.floor rundet dafür immer ab. Anschließend werden diese Jahre von der Restzeit abgezogen (rest -= … ist die Kurzform für rest = rest - …), sodass die nächste Zeile mit dem Übrigbleibsel weiterarbeitet. So schält sich der Countdown von der größten bis zur kleinsten Einheit durch.

function zweistellig(zahl) {
  return (zahl < 10 ? "0" : "") + zahl;
}

Diese Hilfsfunktion sorgt für die Uhrzeitoptik: Aus der 7 wird „07". Das Fragezeichen-Doppelpunkt-Konstrukt heißt Bedingungsoperator und ist eine Kurzschreibweise für „wenn … dann … sonst …" — ist die Zahl kleiner als 10, wird eine Null vorangestellt, sonst nichts.

anzeige.textContent =
  (jahre > 0 ? "Jahre: " + jahre + " " : "") +
  (monate > 0 ? "Monate: " + monate + " " : "") +
  (tage > 0 ? "Tage: " + tage + " " : "") +
  zweistellig(stunden) + ":" + zweistellig(minuten) + ":" + zweistellig(sekunden);

Der Ausgabetext wird aus Bausteinen zusammengesetzt. Wieder entscheidet der Bedingungsoperator: Ist die Zahl 0, wird ein leerer Text eingesetzt, die Einheit fällt also weg. Am Ende hängt immer die Uhrzeitform. Geschrieben wird per textContent in ein normales Element — das Original benutzte dafür noch ein schreibgeschütztes Formularfeld.

countdown();
uhr = setInterval(countdown, 1000);

Der erste Aufruf füllt die Anzeige sofort, damit dort keine Sekunde lang Striche stehen. setInterval lässt die Funktion danach alle 1000 Millisekunden — also jede Sekunde — erneut laufen. Der Rückgabewert wird in uhr gemerkt, denn nur mit dieser Nummer lässt sich die Wiederholung später per clearInterval(uhr) wieder stoppen.

Zum Anpassen: Neben Termin und Endtext lässt sich vor allem der Ausgabetext leicht umbauen — schreibt statt "Tage: " etwa " Tage, " oder ergänzt einen einleitenden Satz wie "Noch " + tage + " Tage". Wer die Jahres- und Monatsangabe gar nicht braucht, löscht einfach die entsprechenden Zeilen aus dem Ausgabeblock; die Tage zählen dann einfach weiter hoch.