Witze des Tages
Blendet alle zwei Stunden einen anderen Witz auf eurer Homepage ein — ohne fremden Server.
Wollt ihr alle zwei Stunden einen neuen Witz auf eurer Homepage? Genau das macht dieses Script: Es teilt den Tag in zwölf Zwei-Stunden-Fenster ein und zeigt in jedem Fenster einen anderen Witz aus seiner Sammlung — eure Besucher bekommen also bei fast jedem Besuch etwas Neues zu lesen, ohne dass ihr selbst Hand anlegen müsst.
Oben in der Demo seht ihr den Witz des aktuellen Zeitfensters. Er wechselt automatisch zu jeder geraden Stunde (0, 2, 4 … 22 Uhr); alle Besucher sehen im selben Zeitfenster denselben Witz.
In der alten Fassung lud der Einbau-Code die Witze von unserem Server nach. Die modernisierte Fassung bringt ihre Witzsammlung direkt im Script mit und läuft komplett auf eurer eigenen Seite. Eure Besucher müssen lediglich JavaScript im Browser zulassen — aber das gilt für jedes Script auf dieser Seite. Die Sammlung könnt ihr natürlich nach Herzenslust durch eigene Witze ersetzen oder erweitern.
Nach demselben Prinzip, nur mit Tageswechsel, arbeiten Murphys Gesetz des Tages und das Zitat des Tages. Wer lieber selbst rätselt, findet bei den Scherzfragen Nachschub.
Das ist der Witz des aktuellen Zwei-Stunden-Fensters — zur nächsten geraden Stunde erscheint automatisch der nächste.
So funktioniert das Script
Das Script besteht aus drei Teilen: einer Liste mit den Witzen, einer Rechnung, die aus Datum und Uhrzeit das aktuelle Zwei-Stunden-Fenster ermittelt, und einer Zeile, die den passenden Witz in die Seite schreibt. Knöpfe gibt es keine — das Script läuft einmal beim Laden der Seite.
const witze = [
"Treffen sich zwei Magnete. Sagt der eine: „Was soll ich heute bloß anziehen?“",
// …
];Die Witze stehen in einem Array (einer Liste). Es sind bewusst 13 Stück: Weil 13 kein Teiler der zwölf Tagesfenster ist, verschiebt sich die Reihenfolge jeden Tag um eins — dieselbe Uhrzeit liefert also nicht jeden Tag denselben Witz.
const jetzt = new Date();
const tagImJahr = Math.floor(
(Date.UTC(jetzt.getFullYear(), jetzt.getMonth(), jetzt.getDate()) -
Date.UTC(jetzt.getFullYear(), 0, 1)) / 86400000
);new Date() liefert das aktuelle Datum samt Uhrzeit. Daraus berechnet das Script zunächst, der wievielte Tag des Jahres heute ist: Millisekunden von heute minus Millisekunden vom 1. Januar, geteilt durch 86 400 000 (die Millisekunden eines Tages). Date.UTC() rechnet dabei bewusst in Weltzeit — mit der Ortszeit käme durch die Sommerzeit eine Stunde Differenz dazwischen und das Ergebnis läge im Sommer um einen Tag daneben.
const zeitfenster = tagImJahr * 12 + Math.floor(jetzt.getHours() / 2);Das ist der Kern des Scripts. getHours() liefert die Stunde von 0 bis 23; durch 2 geteilt und mit Math.floor() abgerundet ergibt das die Nummer des Zwei-Stunden-Fensters von 0 (0–2 Uhr) bis 11 (22–24 Uhr). Dazu kommt der Jahrestag mal 12, damit jedes Fenster des Jahres eine eigene fortlaufende Nummer bekommt. Innerhalb eines Fensters bleibt diese Nummer gleich — deshalb sehen alle Besucher im selben Fenster denselben Witz, und zur nächsten geraden Stunde springt sie um eins weiter.
const witz = witze[zeitfenster % witze.length];
document.getElementById("wt-witz").textContent = witz;Das Prozentzeichen ist der Modulo-Operator: Er liefert den Rest einer Division und macht aus der großen Fensternummer immer eine gültige Position von 0 bis 12 in der Witzliste. Der gewählte Witz wird per textContent in das Ausgabe-Element geschrieben — das Script steht dafür im Code unter dem Element, damit es beim Ausführen schon existiert.
Zum Anpassen: Ersetzt oder ergänzt einfach die Witze in der Liste — witze.length sorgt dafür, dass die Rechnung mit jeder Listenlänge funktioniert. Am schönsten wechselt es, wenn die Anzahl kein Teiler und kein Vielfaches von 12 ist. Und wer den Wechsel z. B. stündlich möchte, ersetzt die 12 durch 24 und getHours() / 2 durch getHours().
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.