Mit ein paar Zeilen JavaScript sieht eine Website bei jedem Besuch anders aus.
Bunte Trennlinien bringen Abwechslung in die Seite.
Das Aussehen einer Website wird zu einem großen Teil von den verwendeten Farben bestimmt. Verändert man die Farben, bekommt man gleich einen ganz anderen Eindruck von der Seite, was durchaus gewünscht sein kann, um der Internetpräsenz ein abwechslungsreicheres und insgesamt farbenfroheres Aussehen zu verleihen.
In HTML werden Farben stets als sechsstellige hexadezimale Zahlen angegeben, die vom Nummernzeichen (#) eingeleitet werden. Die sechs Stellen werden dabei von Ziffern zwischen 0 und 9 und von Buchstaben zwischen A und F gebildet und bestimmen zusammen die eigentliche Farbe. So schreibt man beispielsweise für die Farbe Orange die hexadezimale Zahl #FFA500.
Die erwünschte Abwechslung lässt sich nun dadurch erreichen, dass man die Farben bei jedem Aufruf der Seite zufällig generiert. Dazu braucht man zunächst eine Funktion, die eine zufällig erstellte hexadezimale Zahl zurückgibt.
function randomColor ()
{
var color="#";
for (x=0;x<6;x++)
{
color+=
"0123456789ABCDEF"
.charAt (Math.round (Math.random ()*1000)%16);
}
return color;
}
Zu Beginn wird der Variablen color das Nummernzeichen zugewiesen, mit dem die hexadezimale Zahl eingeleitet wird.
Den wichtigsten Abschnitt der Funktion stellt die darauffolgende for-Schleife dar, die insgesamt sechsmal durchlaufen wird.
Darin gibt der Abschnitt Math.round (Math.random ()*1000) zunächst eine Zufallszahl zwischen 0 und 1000 zurück, mit der Modulo-Division durch 16 wird dieser Bereich eingeschränkt. Die Zufallszahl liegt nun zwischen 0 und 15.
Die Methode charAt (), die auf den String "0123456789ABCDEF" angewandt wird, wählt ein Zeichen aus diesem String aus, das schließlich an den Wert der Variablen color angehängt wird. Welches Zeichen dabei ausgewählt wird, hängt davon an, wie die eben generierte Zufallszahl lautet. Diese bestimmt nämlich die Stelle, von der das Zeichen zu übernehmen ist.
Zum Schluss wird der komplette hexadezimale Farbcode mittels return color; von der Funktion zurückgegeben.
Eine so erstellte Zufallsfarbe kann natürlich beliebig eingesetzt werden. Möglich wäre es etwa bei Rahmen von Bildern und Formularfeldern oder bei Trennlinien, wie es die folgenden Codebeispiele zeigen:
window.document.write
("<img src=\"bild.gif\""
+" style=\"border:solid 1px "+randomColor ()+";\" />");
window.document.write
("<input type=\"text\""
+" style=\"border:solid 1px "+randomColor ()+";\" />");
window.document.write
("<hr style=\"height:1px;color:"+randomColor ()+";\" />");
Die erste Anweisung fügt ein Bild in die Seite ein, das mit einem dünnen Rahmen in einer zufälligen Farbe versehen wird, genau so wie das darauffolgende Formularfeld. Die durch den letzten Befehl entstehende Trennlinie kann zum Strukturieren der Seite verwendet werden.
Denkbar wären natürlich noch viele weitere Seitenelemente, die sich so verändern ließen, zum Beispiel Tabellenrahmen oder sogar die Scrollbalken. Wichtig ist nur, dass man es damit nicht übertreibt, schließlich ist ein einheitliches und charakteristisches Aussehen einer Website auch noch etwas wert.
