Zitat des Tages
Blendet jeden Tag automatisch ein anderes Zitat bekannter Dichter und Denker auf eurer Homepage ein.
Mit diesem Script habt ihr die Möglichkeit, auf eurer Homepage jeden Tag ein neues Zitat von einem mehr oder weniger bekannten Menschen einzublenden. Goethe, Schiller, Seneca, Lichtenberg — verschiedene Schreiber und Denker teilen ihre bekanntesten Sprüche mit euren Besuchern, ohne dass ihr euch nach dem Einbau um irgendetwas kümmern müsst: Der Spruch wechselt von selbst einmal am Tag.
In der Demo unten seht ihr das heutige Zitat. Morgen steht an derselben Stelle automatisch das nächste — das Script rechnet aus dem aktuellen Datum aus, welcher Eintrag der Liste an der Reihe ist. Alle Besucher sehen am selben Tag dasselbe Zitat, erst um Mitternacht wird gewechselt.
Früher holte sich dieses Script sein Zitat von unserem Server; die neue Fassung bringt ihre Zitatensammlung gleich selbst mit. Das hat zwei Vorteile: Das Script funktioniert für immer, ganz ohne fremde Server — und ihr könnt die Sammlung nach Belieben erweitern. Jedes Zitat ist eine Zeile im Array zitate; je mehr ihr eintragt, desto seltener wiederholt sich ein Spruch.
Wem der Sinn eher nach Humor als nach Weisheit steht: In unserem Fun-Fach gibt es auch Murphys Gesetz des Tages, die Witze des Tages und chinesische Glückskekse zum Aufknacken.
Das Zitat wechselt automatisch einmal am Tag.
So funktioniert das Script
Das Script besteht aus drei Teilen: einer Zitatensammlung, einer kleinen Datumsrechnung, die daraus das Tageszitat bestimmt, und der Ausgabe in die Seite. Es läuft einmal beim Laden — Knöpfe oder Eingaben gibt es nicht.
const zitate = [
{ text: "Ein Pessimist ist ein Optimist, der nachgedacht hat.",
autor: "Dan Bennet, amerikanischer Kolumnist" },
...
];Die Sammlung ist ein Array aus Objekten. Ein Objekt fasst zusammengehörige Werte unter benannten Eigenschaften zusammen — hier text und autor —, auf die man später bequem mit der Punktschreibweise (zitat.text) zugreift. So bleiben Spruch und Urheber immer beisammen, und neue Zitate sind schnell ergänzt: einfach einen weiteren Eintrag in geschweiften Klammern anhängen, mit Komma dazwischen.
const tagesnummer = Math.floor(Date.now() / 86400000);Hier steckt die ganze Tages-Logik in einer Zeile. Date.now() liefert die aktuelle Zeit als Millisekunden seit dem 1. Januar 1970 — dem sogenannten Unix-Zeitstempel, mit dem Computer intern rechnen. Geteilt durch 86400000 (die Millisekunden eines Tages: 1000 × 60 × 60 × 24) und mit Math.floor() abgerundet ergibt das eine fortlaufende Tagesnummer, die sich genau einmal pro Tag um 1 erhöht. Deshalb sehen alle Besucher am selben Tag dasselbe Zitat — anders als bei Math.random(), das bei jedem Aufruf etwas anderes liefern würde.
const zitat = zitate[tagesnummer % zitate.length];Der Restwert-Operator % (sprich: „modulo") liefert den Rest einer Division. Die Tagesnummer geteilt durch die Anzahl der Zitate lässt immer einen Rest zwischen 0 und zitate.length - 1 — also genau einen gültigen Index ins Array. Von Tag zu Tag wandert der Index um eins weiter, und nach dem letzten Zitat beginnt die Liste wieder von vorn.
document.getElementById("zt-ausgabe").innerHTML =
"<strong>" + zitat.text + "</strong><br>" + zitat.autor;Zum Schluss die Ausgabe: getElementById greift sich den vorbereiteten Container, und innerHTML setzt den Inhalt — das Zitat fett in <strong>-Tags, darunter nach einem Zeilenumbruch der Autor. Weil das Script unter dem Container steht, existiert dieser bereits, wenn die Ausgabe geschrieben wird.
Zum Anpassen: Tragt eure Lieblingszitate ins Array ein oder ersetzt die Sammlung komplett — das Schema funktioniert genauso gut für Kochtipps, Vokabeln oder Bibelverse, eben alles, was täglich wechseln soll. Auch die Darstellung ist schnell geändert: Wer den Autor kursiv möchte, packt ihn in der Ausgabezeile in <em>-Tags.
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.