Chinesische Glückskekse
Öffnet per Klick einen Glückskeks: ein zufälliger Glücksspruch — und auf Wunsch fünf Glückszahlen dazu.
Dieses Script von John Hobbs bringt das Glückskeks-Ritual auf eure Homepage: Ein Klick, und es erscheint ein zufälliger Glücksspruch — so wie der Zettel im aufgebrochenen Keks. Ein zweiter Knopf liefert passend dazu fünf Glückszahlen zwischen 0 und 99, ganz wie auf den Rückseiten vieler echter Glückskeks-Zettel.
Probiert es oben in der Demo einfach aus: „Klick für dein Glück" zieht einen der 13 Sprüche, „Klick für deine Glückszahlen" würfelt fünf neue Zahlen. Jeder Klick liefert ein frisches Ergebnis — mehrmals klicken lohnt sich also.
Übrigens: So richtig chinesisch sind Glückskekse gar nicht. Sie wurden in ihrer heutigen Form in den USA populär und gehen vermutlich auf japanische Einwanderer zurück — in China selbst waren sie lange praktisch unbekannt. Dem Spaß tut das keinen Abbruch.
Wer täglich wechselnde Weisheiten mag, findet im Archiv auch das Zitat des Tages und Murphys Gesetz des Tages.
So funktioniert das Script
Das Script hat drei Bausteine: eine Liste mit den Glückssprüchen, eine kleine Zufallsfunktion und zwei Funktionen, die auf die Knöpfe reagieren — eine für den Spruch, eine für die Zahlen. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablen nicht mit anderen Scripts auf der Seite kollidieren.
const sprueche = [
"Witz ist wohlerzogene Unverschämtheit.",
"Zwei Kapitäne lassen das Schiff kentern.",
// …
];Die Sprüche stehen in einem Array (einer Liste). Das Original von 2004 vergab die Einträge noch einzeln per quotes[0] = …, quotes[1] = … — und genau dabei passierte ein Fehler: Die Nummer 8 wurde versehentlich doppelt vergeben, sodass der Spruch „Wo keine Erde ist, ist das Säen überflüssig" nie erscheinen konnte. Mit der modernen Listen-Schreibweise ohne Nummern kann das nicht mehr passieren — und der verschollene Spruch ist wieder dabei, die Liste hat jetzt 13 Einträge.
function zufall(bereich) {
return Math.floor(Math.random() * bereich);
}Math.random() liefert eine Kommazahl zwischen 0 (einschließlich) und 1 (ausschließlich). Multipliziert mit bereich und mit Math.floor() abgerundet ergibt das eine ganze Zufallszahl von 0 bis bereich − 1 — genau richtig, um damit einen Listeneintrag zu wählen. Beim Spruch wird zufall(sprueche.length) aufgerufen: length ist die Anzahl der Einträge, das Script passt sich eurer Spruchliste also automatisch an.
const zahlen = [];
for (let i = 0; i < 5; i++) {
zahlen.push(zufall(100));
}
document.getElementById("gk-zahlen").textContent = zahlen.join(" · ");Für die Glückszahlen sammelt eine for-Schleife fünf Zufallszahlen von 0 bis 99 in einem Array — push hängt jede neue Zahl hinten an. join(" · ") klebt die fünf Zahlen anschließend mit einem Punkt als Trenner zu einem Text zusammen (das Original reihte fünf einzelne Variablen mit Leerzeichen aneinander — die Schleife tut dasselbe in drei Zeilen). Ausgegeben wird per textContent in das Ergebnis-Element.
document.getElementById("gk-spruch-knopf").addEventListener("click", glueckskeks);
document.getElementById("gk-zahlen-knopf").addEventListener("click", glueckszahlen);Zum Schluss werden die beiden Funktionen mit den Knöpfen verbunden. Das Original benutzte dafür onclick-Attribute an Links ohne Ziel — heute nimmt man richtige <button>-Elemente und addEventListener: Das funktioniert auch per Tastatur und hält HTML und JavaScript getrennt.
Zum Anpassen: Tauscht einfach die Sprüche in der Liste aus oder ergänzt eigene — Anführungszeichen und Komma nicht vergessen, die Anzahl ist egal. Wer Lottozahlen von 1 bis 49 möchte, ersetzt zufall(100) durch zufall(49) + 1.
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.