Zufallslink Generator
Zeigt bei jedem Seitenaufruf einen zufällig ausgewählten Link aus einer selbst gepflegten Linkliste an.
Dieses Script würfelt bei jedem Aufruf der Seite einen Link aus einer Liste aus und zeigt ihn an. Eure Besucher bekommen so bei jedem Besuch eine andere Empfehlung zu sehen — eine nette Spielerei für die Startseite, eine „Überraschungslink"-Ecke oder eine Linkliste, die nicht immer gleich aussieht.
In der Demo unten seht ihr das Script mit drei Beispiel-Links im Einsatz; ladet die Seite ein paarmal neu, dann erscheint mal der eine, mal der andere. Welcher Link gezogen wird, entscheidet der Zufall bei jedem Seitenaufruf neu.
Für den Einsatz auf der eigenen Homepage müsst ihr die Links natürlich anpassen: Im Array urls tragt ihr eure eigenen Adressen ein — jede als vollständige URL inklusive https:// (bzw. http://), und es dürfen beliebig viele sein. Für jede weitere Adresse ergänzt ihr einfach eine Zeile in der Liste.
Mehr Zufall aus unserem Fun-Fach: Die chinesischen Glückskekse servieren euch Weisheiten nach demselben Zufallsprinzip, und das Zitat des Tages wechselt seinen Spruch einmal täglich.
Ladet die Seite neu, um einen anderen Link zu ziehen.
So funktioniert das Script
Das Script ist herrlich kurz und besteht aus drei Schritten: eine Linkliste anlegen, per Zufall einen Eintrag auswählen und daraus einen klickbaren Link in die Seite setzen. Es läuft einmal beim Laden der Seite — es gibt keinen Knopf und keine Eingabe.
const urls = [
"https://www.kostenlose-javascripts.de",
"http://www.google.de",
"http://de.wikipedia.org"
];Die Linkliste ist ein Array, also eine nummerierte Sammlung von Werten — hier drei Adressen als Zeichenketten. Das Original von 2005 baute die Liste noch umständlich mit urls[i++] = "…" Zeile für Zeile zusammen; die moderne eckige-Klammern-Schreibweise tut dasselbe und ist leichter zu pflegen: Für einen weiteren Link hängt ihr einfach eine Zeile mit Komma an.
const zufall = Math.floor(Math.random() * urls.length);
const url = urls[zufall];Math.random() liefert eine Zufallszahl zwischen 0 (einschließlich) und 1 (ausschließlich). Multipliziert mit urls.length — der Anzahl der Einträge — ergibt das eine Kommazahl zwischen 0 und knapp unter 3, und Math.floor() rundet sie ab: heraus kommt 0, 1 oder 2, also genau ein gültiger Index ins Array. Das Original würfelte erst eine große Zahl und rechnete dann mit dem Restwert-Operator % — das Ergebnis ist dasselbe, der direkte Weg ist nur einfacher zu verstehen.
const link = document.createElement("a");
link.href = url;
link.textContent = url;
document.getElementById("zl-ausgabe").appendChild(link);Statt wie früher mit document.write() mitten ins Dokument zu schreiben, baut das Script den Link als richtiges Element: createElement("a") erzeugt ihn, href bekommt die Zieladresse, textContent den sichtbaren Text — hier einfach die Adresse selbst —, und appendChild() hängt ihn in den vorbereiteten Container mit der ID zl-ausgabe. Dieser Weg funktioniert auch, wenn das Script nachträglich geladen wird, und kann kein HTML kaputt machen.
Zum Anpassen: Neben euren eigenen Adressen im Array könnt ihr auch den Linktext ändern — wer statt der nackten URL lieber „Überraschung des Tages" anzeigen will, ersetzt link.textContent = url; durch link.textContent = "Überraschung des Tages";. Und wenn der Link in einem neuen Tab aufgehen soll, ergänzt ihr die Zeile link.target = "_blank";.
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.