Ich hatte bereits damit herum experimentiert:
Jahreszeiten & Uhrzeiten – Darstellungen von Bilder zur „richtigen“ Zeit …

Nun habe ich eine dies einmal für meine 3 Foren umgesetz. Es geht sich hier um eine Funktion, die es ermöglicht, den Banner einer Webseite (bzw. meiner Foren) basierend auf dem aktuellen Datum und der Uhrzeit dynamisch zu ändern. Das erste Ziel ist, die Winterzeit visuell darzustellen und den Nutzern eine stimmungsvolle Benutzererfahrung zu bieten. Dabei kommen JavaScript und CSS zum Einsatz, um die Hintergründe automatisch zu wechseln – ganz ohne eine manuelle Eingabe oder das Neuladen der Seite.

Was passiert genau?

Das JavaScript prüft das aktuelle Datum und die Uhrzeit und ändert das Hintergrundbild einer Tabelle entsprechend.

Hier ist eine Übersicht der Funktionsweise:

Standardbild: Außerhalb der Weihnachtszeit (Weihnachtszeit = 1. bis 31 Dezember) wird immer das Bild winterbanner.png angezeigt.
(Dies wird im Laufe der Zeit noch auf andere Jahreszeiten, kombiniert mit verschiedenen Tageszeiten, erweitert.)

Die Ausnahme für die Weihnachtszeit (1. bis 31 Dezember):
Wintertag (8:00 bis 20:00 Uhr): Das Bild wintertag.png wird angezeigt.
Winternacht (20:00 bis 8:00 Uhr): In der Nacht wird das Bild winternacht.png angezeigt.
Silvesterzeit: An Silvester (vom 31. Dezember, 20:00 Uhr bis zum 1. Januar, 8:00 Uhr) erscheint das Bild wintersilvester.png.

Die Bilder wechseln automatisch und ohne weiteres Zutun des Nutzers. Dies sorgt für eine lebendige Atmosphäre und eine visuelle Anpassung an die jeweilige Tageszeit und Jahreszeit.

Derzeit gibt es folgende Bilder:

Normale Winterzeit (Gedacht für Januar, Februar & März. Derzeit noch ohne Nachtversion)

Weihnachtszeit (Dezember – In Tag und Nacht)

Die Nachtversion nur für die Silvesternacht

(japp, die Bilder könnten besser sein … ich bin einfach kein großer Grafiker. Ich mach lieber das ….:)

Wie funktioniert der Code?

JavaScript wird verwendet, um die Uhrzeit und das Datum zu prüfen. Anhand dieser Werte wird dann das passende Hintergrundbild ausgewählt.
CSS sorgt für das visuelle Styling der Seite, inklusive der Schneeflocken und Funken, die in der Winterzeit die Benutzeroberfläche verschönern.
Mit setInterval() wird sichergestellt, dass das Hintergrundbild jede Minute überprüft und aktualisiert wird, falls sich die Uhrzeit ändert.

function updateBackground() {
const container = document.getElementById("boxtabelle-container");
const now = new Date();
const month = now.getMonth() + 1;
const day = now.getDate();
const hour = now.getHours();

let imageUrl = 'https://bastbox.de/images/winterbanner.png'; // Standardbild

if (month === 12) {
if ((day === 31 && hour >= 20) || (day === 1 && hour < 8)) { imageUrl = 'https://bastbox.de/images/wintersilvester.png'; // Silvesterbild } else if (hour >= 8 && hour < 20) {
imageUrl = 'https://bastbox.de/images/wintertag.png'; // Tagbild
} else {
imageUrl = 'https://bastbox.de/images/winternacht.png'; // Nachtbild
}
}

container.style.backgroundImage = `url('${imageUrl}')`;
}

updateBackground();
setInterval(updateBackground, 60 * 1000); // Aktualisiere jede Minute

Erweiterungen in der Zukunft

Das war jetzt einmal ein kleiner Anfang! Neben der reinen Spielerei war dies ein kleines Projekt, um noch einmal JavaScript zu nutzen und Zustände sowie Funktionen anzuwenden. In diesem Fall ging es um die Anwendung von Datum und Uhrzeit – oder genauer gesagt: Kalendermonat und Tageszeit – um basierend darauf das richtige Bild einzublenden. In den kommenden Monaten werde ich, das Script weiter auszubauen, um den gesamten Jahreskreis abzubilden. Es werden nicht nur Winterbilder, sondern auch Frühling, Sommer und Herbst mit passenden Tag- und Nachtbildern hinzukommen.

Frühling: Blumen, sanfte Farben und frische Morgenstimmungen.
Sommer: Strahlende Sonne, warme Farben und entspannte Urlaubsgefühle.
Herbst: Goldene Blätter, stimmungsvolle Farben und herbstliche Abendstimmungen.
Winter: Schnee, Kälte und gemütliche Abende (wie im aktuellen Setup).

Jeder Monat bekommt also nicht nur ein passendes Jahreszeiten-Design, sondern auch eine Tag- und Nacht-Variation, die je nach Uhrzeit den Benutzer durch den Tag begleitet.

Fazit:

Mit diesem kleinen Projekt habe ich eine einfache, aber effektive Methode entwickelt, um die Benutzeroberfläche einer Webseite (z. B. Forum) dynamisch an die Jahreszeit und Tageszeit anzupassen. Es ist eine schöne Möglichkeit, saisonale Stimmung in meinen Foren zu erzeugen und gleichzeitig die Interaktivität zu erhöhen. In Zukunft wird dieses Konzept noch weiter ausgebaut, um mehr visuelle Effekte hinzuzufügen und die Benutzererfahrung zu verbessern. Eventuell werde ich noch das CSS und das Script auslagern, um den eigentlichen HTML-Code schlank zu halten. Die Banner liegen jetzt schon zentral hier in der Bastbox. Würde auch das CSS und das JavaScript selbst ausgelagert werden, hätte das den Vorteil, dass ich Änderungen zentral an einer Stelle vornehmen kann und diese sich auf alle an- und eingebundenen Stellen auswirken. Mal sehen, wie viel Zeit, Lust und Motivation ich noch habe…