JavaScripts › Datum & Uhrzeit

Tage bis zum Jahr 3000

Zählt, wie viele Tage es heute noch bis zum 1. Januar 3000 sind.

Wer wollte nicht schon mal wissen, wie viele Tage es noch bis zum Jahr 3000 sind? Dieses kleine Script verrät es euch: Es rechnet beim Laden der Seite die Spanne zwischen dem heutigen Datum und dem 1. Januar 3000 aus und schreibt die Anzahl der verbleibenden Tage auf die Seite — aktuell sind das noch gut 355 000 Tage, und mit jedem Tag wird die Zahl um eins kleiner.

Zugegeben: Einen praktischen Nutzen hat der Countdown zum vierten Jahrtausend nicht — er ist ein Augenzwinkern für die eigene Homepage. Interessant ist aber, wie die Rechnung funktioniert: JavaScript speichert jeden Zeitpunkt intern als Millisekunden-Zahl (den sogenannten Timestamp). Zwei Zeitpunkte voneinander abziehen und durch die Millisekunden eines Tages teilen — fertig ist die Tagesdifferenz. Nach diesem Muster könnt ihr euch mit einer einzigen geänderten Zeile jeden beliebigen eigenen Countdown bauen, etwa bis zum nächsten Geburtstag oder Urlaub.

Bedienen müsst ihr in der Demo nichts — die Zahl unten gilt für den heutigen Tag und stimmt bei jedem Seitenaufruf aufs Neue.

Wenn ihr lieber in die Vergangenheit statt in die Zukunft rechnet: Das Script An welchem Wochentag wurde ich geboren? aus derselben Kategorie schaut nach, auf welchen Wochentag euer Geburtsdatum fiel.

Datum & Uhrzeit Baujahr 2004 läuft in deinem Browser

So funktioniert das Script

Das Script ist ein schönes Einsteiger-Beispiel für das Rechnen mit Datumswerten: Es erzeugt zwei Zeitpunkte, bildet ihre Differenz in Millisekunden, rechnet sie in Tage um und schreibt das Ergebnis in die Seite. Alles zusammen sind das nur fünf Zeilen.

const heute = new Date();
const ziel = new Date(3000, 0, 1); // 1. Januar 3000

new Date() ohne Argumente liefert den aktuellen Zeitpunkt. Für das Ziel wird das Datum aus Jahr, Monat und Tag zusammengesetzt — Achtung bei der mittleren Zahl: JavaScript zählt die Monate von 0 (Januar) bis 11 (Dezember), die 0 steht hier also für den Januar. Das Original-Script benutzte noch die amerikanische Schreibweise new Date("01/01/3000"); die Variante mit einzelnen Zahlen ist eindeutiger und wird von jedem Browser gleich verstanden.

const tage = Math.floor((ziel.getTime() - heute.getTime()) / 86400000) + 1;

Hier passiert die eigentliche Rechnung. getTime() verwandelt beide Zeitpunkte in ihren Timestamp — die Zahl der Millisekunden seit dem 1. Januar 1970, dem Nullpunkt der Computer-Zeitrechnung. Die Differenz der beiden Zahlen ist die verbleibende Zeit in Millisekunden. Geteilt wird durch 86400000, die Länge eines Tages: 24 Stunden × 60 Minuten × 60 Sekunden × 1000 Millisekunden. Math.floor() rundet das Ergebnis auf die nächstkleinere ganze Zahl ab (aus 355 504,7 wird 355 504), denn der angebrochene heutige Tag ist ja kein voller Rest-Tag mehr. Das + 1 zählt ihn — wie schon im Original — als laufenden Tag trotzdem mit.

document.getElementById("j3k-ausgabe").innerHTML =
  "Es sind nur noch <strong>" + tage + " Tage</strong> bis zum Jahr 3000.";

Zum Schluss wird das Ergebnis in einen Satz eingebaut und per innerHTML in das vorbereitete Ausgabe-Element geschrieben; die <strong>-Tags heben die Zahl hervor. Das Original nutzte dafür document.write() — das funktioniert nur während des Seitenaufbaus und gilt heute als überholt. Damit das Element beim Ausführen schon existiert, steht das Script im HTML unter dem Ausgabe-Element.

Zum Anpassen: Für einen eigenen Countdown müsst ihr nur die Ziel-Zeile ändern — new Date(2027, 6, 15) zählt z. B. die Tage bis zum 15. Juli 2027 (Monat 6 = Juli!). Dazu noch den Ausgabesatz anpassen, fertig. Liegt das Ziel in der Vergangenheit, wird die Zahl übrigens negativ — dann könnt ihr mit einem Vorzeichenwechsel genauso gut „Tage seit …“ ausgeben.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Datum & Uhrzeit