Jahresfortschritt
Zeigt als Balken, wie viel vom Jahr, Monat, von der Woche und vom Tag schon vergangen ist — laufend aktualisiert.
„Das Jahr ist zu 66 Prozent vorbei" — solche Angaben haben einen eigenartigen Reiz. Sie machen etwas anschaulich, das man sonst nur als Datum wahrnimmt: dass Zeit gleichmäßig verrinnt und man mittendrin steckt. Dieses Script zeigt vier solcher Balken: für das Jahr, den laufenden Monat, die Woche und den Tag.
Alle vier laufen live mit; der Tagesbalken bewegt sich sichtbar, der Jahresbalken braucht dafür etwa vier Tage. Unter jedem Balken steht, wie viel schon vergangen und wie viel noch übrig ist — in Tagen beim Jahr, in Stunden und Minuten beim Tag.
Für die Wochenrechnung gilt die europäische Zählung mit Montag als erstem Tag, wie in ISO 8601 festgelegt. Beim Jahr werden Schaltjahre korrekt berücksichtigt: 2024 hatte 366 Tage, jeder Tag also einen um ein Dreihundertsechzigstel kleineren Anteil als in einem gewöhnlichen Jahr. Und noch etwas Hübsches: Die Jahresmitte liegt nicht am 1. Juli, sondern am 2. Juli — in gewöhnlichen Jahren um die Mittagszeit, in Schaltjahren um Mitternacht.
Verwandtes im Archiv: Tage bis zum Monatsende, Countdown bis Silvester für den Blick aufs Jahresende und Alter in Sekunden für die ganz große Zahl.
Die Anzeige aktualisiert sich jede Sekunde. Gerechnet wird in eurer Ortszeit.
So funktioniert das Script
Vier Balken, eine Rechnung: Für jeden Zeitraum werden Anfang und Ende bestimmt, und der Anteil ergibt sich aus dem Verhältnis. Der Reiz liegt darin, dass Monats- und Jahreslängen dabei nirgends vorkommen müssen.
const gesamt = zeitraum.bis - zeitraum.von;
const vergangen = jetzt - zeitraum.von;
const anteil = vergangen / gesamt * 100;Das ist die ganze Mathematik. Weil Date-Objekte sich voneinander abziehen lassen, braucht es keine Fallunterscheidung: Ob der Monat 28, 30 oder 31 Tage hat und ob das Jahr ein Schaltjahr ist, steckt automatisch in der Differenz. Wer stattdessen mit einer Tabelle der Monatslängen arbeitet, baut sich genau die Sonderfälle ein, die er vermeiden wollte.
const monatsende = new Date(jahr, monat + 1, 1);Der „erste Tag des nächsten Monats" ist eine bequeme Art, das Monatsende zu bezeichnen. Für den Dezember ergibt monat + 1 den Wert 12, den es als Monatsnummer nicht gibt — JavaScript rechnet das stillschweigend zum Januar des Folgejahres um. Diese Nachsicht bei Datumsangaben ist eine der angenehmsten Eigenschaften des Date-Objekts.
const wochentag = jetzt.getDay() === 0 ? 7 : jetzt.getDay();
const wochenanfang = new Date(jahr, monat, jetzt.getDate() - wochentag + 1);Für den Wochenanfang wird vom heutigen Tag so weit zurückgegangen, wie der Wochentag angibt. Wieder muss der Sonntag umgerechnet werden, den JavaScript als 0 führt, die europäische Zählung aber als siebten Tag — dieselbe Stelle wie bei der Kalenderwoche. Der berechnete Tag darf ruhig 0 oder negativ werden; das Date-Objekt landet dann korrekt im Vormonat.
style="width:' + anteil.toFixed(2) + '%"Der Balken ist kein Bild und keine Grafik, sondern schlicht ein farbiges Kästchen mit prozentualer Breite in einem zweiten mit overflow: hidden. Das ist die einfachste und zugleich robusteste Art, einen Fortschrittsbalken zu bauen — sie skaliert mit der Schriftgröße und funktioniert auf jedem Gerät.
transition: width .3s linear;Diese Zeile im Stylesheet lässt den Balken gleiten statt zu springen. Sie macht sichtbar, was der Unterschied zwischen Animation im Script und Animation im Stylesheet ist: Das Script setzt nur den Zielwert, den Weg dorthin zeichnet der Browser selbst — flüssiger und sparsamer, als es eine Schleife könnte.
Zum Anpassen: Für eine Anzeige, die nur einmal am Tag zählt, ersetzt ihr das Sekundenintervall durch einen größeren Wert. Und wenn ihr einen Balken für ein eigenes Projekt braucht, gebt ihr statt Jahresanfang und -ende einfach die beiden Projektdaten an — die Rechnung bleibt Zeile für Zeile dieselbe.
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.