Tage bis zum Monatsende
Gibt beim Laden der Seite als Satz aus, wie viele Tage im laufenden Monat noch übrig sind.
Dieses kleine Script gibt aus, wie viele Tage im aktuellen Monat noch verbleiben. Es schreibt das Ergebnis als fertigen Satz auf die Seite und passt die Formulierung an: Bei einem einzelnen Tag heißt es „vergeht noch 1 Tag", am letzten Tag des Monats meldet es das ausdrücklich. Auf einer Homepage ist so ein Satz ein netter Aufhänger für Monatsangebote, Abgabefristen oder einen Blog-Rückblick.
Bedienen müsst ihr nichts — die Zahl unten gilt für den heutigen Tag und wird bei jedem Seitenaufruf neu berechnet. Grundlage ist das Datum, das im Rechner des Besuchers eingestellt ist.
Interessant ist die Frage, woher das Script weiß, wie lang der laufende Monat ist. Es führt dafür eine Liste mit den zwölf Monatslängen mit und korrigiert den Februar in Schaltjahren auf 29 Tage. Die Regel dafür stammt aus dem gregorianischen Kalender und ist dreistufig: Schaltjahr ist jedes durch 4 teilbare Jahr, außer es ist durch 100 teilbar — es sei denn, es ist zusätzlich durch 400 teilbar. Deshalb war 1900 kein Schaltjahr, 2000 aber schon. Ohne diese Ausnahmen würde der Kalender langsam gegenüber dem Sonnenjahr verrutschen, das mit rund 365,2422 Tagen eben nicht glatt aufgeht.
Weitere Zähler aus diesem Fach: Tage bis Weihnachten rechnet nach demselben Prinzip auf ein festes Datum, der Countdown zählt sekundengenau auf ein frei wählbares Ziel. Wer den ganzen Monat auf einen Blick sehen will, findet im Fach Datum und Uhrzeit einen Kalender.
So funktioniert das Script
Das Script läuft einmal beim Laden der Seite durch und besteht aus vier Schritten: Es liest das heutige Datum, schlägt die Länge des laufenden Monats in einer Liste nach, korrigiert diese Liste in Schaltjahren und bildet zum Schluss die Differenz. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen keine anderen Scripts der Seite stören.
const heute = new Date();
const tag = heute.getDate();
const monat = heute.getMonth();
const jahr = heute.getFullYear();new Date() ohne Angaben liefert den aktuellen Zeitpunkt. Daraus holen drei Methoden die Bestandteile: getDate() den Tag im Monat (1 bis 31), getMonth() den Monat und getFullYear() die vierstellige Jahreszahl. Achtung beim Monat: JavaScript zählt ihn von 0 (Januar) bis 11 (Dezember) — genau richtig, um damit in eine Liste hineinzugreifen, denn auch Listen beginnen bei 0.
Das Original benutzte hier noch getYear(). Diese alte Methode liefert die Jahre seit 1900, für 2026 also 126 — und damit rechnet die Schaltjahrregel weiter unten in Jahrhundertjahren falsch. getFullYear() ist der Nachfolger und gibt die richtige Zahl zurück.
const tageJeMonat = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];Das ist ein Array, also eine nummerierte Liste. Sie enthält die Länge jedes Monats in der richtigen Reihenfolge, beginnend beim Januar mit 31 Tagen. Die Positionen werden ab 0 gezählt: tageJeMonat[0] ist der Januar, tageJeMonat[11] der Dezember. Weil getMonth() genauso zählt, passt der Monatswert direkt als Position hinein.
if ((jahr % 4 === 0 && jahr % 100 !== 0) || jahr % 400 === 0) {
tageJeMonat[1] = 29;
}Hier steht die Schaltjahrregel als Bedingung. Der Prozentoperator % („Modulo") liefert den Rest einer Division — jahr % 4 === 0 heißt also „das Jahr ist ohne Rest durch 4 teilbar". && bedeutet „und", || bedeutet „oder". Zusammengelesen: durch 4 teilbar und nicht durch 100, oder aber durch 400 teilbar. Trifft das zu, wird die Position 1 der Liste — der Februar — auf 29 gesetzt. Dass ein mit const angelegtes Array trotzdem geändert werden darf, überrascht Einsteiger oft: const schützt nur davor, dass die Variable auf eine andere Liste zeigt, der Inhalt der Liste bleibt änderbar.
const rest = tageJeMonat[monat] - tag;Die eigentliche Rechnung ist eine einzige Subtraktion: Länge des Monats minus heutiger Tag. Am 7. Mai ergibt das 31 − 7 = 24 verbleibende Tage. Am letzten Tag des Monats kommt 0 heraus.
if (rest === 1) {
ausgabe.innerHTML = "Bis zum Monatsende vergeht noch <strong>1 Tag</strong>.";
} else if (rest === 0) {
…
}Zum Schluss wird der passende Satz ausgewählt — Einzahl, Sonderfall „letzter Tag" oder Mehrzahl. Die drei Vergleiche benutzen ===, den strikten Vergleich: Er prüft Wert und Typ und ist dem älteren == vorzuziehen, das vorher stillschweigend umwandelt. Der fertige Satz wird per innerHTML in das Ausgabe-Element geschrieben, damit die Zahl in <strong>-Tags hervorgehoben erscheinen kann. Das Original benutzte dafür document.write(), was nur während des Seitenaufbaus funktioniert und heute als überholt gilt.
Zum Anpassen: Die drei Sätze stehen im Klartext im Code und lassen sich frei umformulieren. Wer die Liste mit den Monatslängen loswerden möchte, kann sie durch einen Kniff ersetzen — new Date(jahr, monat + 1, 0).getDate() liefert die Länge des Monats direkt, weil der „nullte" Tag des Folgemonats der letzte Tag des aktuellen ist; die Schaltjahrregel steckt dann schon im Datumsobjekt.
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.