• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hintergrundfarbe Zufall

  • Ersteller Ersteller Die Mathematik
  • Erstellt am Erstellt am
D

Die Mathematik

Guest
Hallo,

ich habe schon die ganze Zeit gegooglet, bin aber immer auf falsche Suchergebnisse gestoßen. Wie ist es möglich, dass beim Aufruf einer html-Seite automatisch eine Zufällige Hintergrundfarbe (Von allen möglichen, nicht von vorher festgelegten) angezeigt wird? Beim Suchen via Google bin ich immer nur auf HintergrundBILD ändern gestoßen, es sollte jedoch die Hintergrundfarbe sein...

Weiß jemand, ob das irgendwie möglich ist?

Gruß
Lukas
 
Also ich habe es mit dem ersten, also Javascript probiert. Ich habe erstmal nur eine Leere html-Datei eingebaut, um zu sehen, ob sich der Hintergrund ändert. Doch der Hintergrund bleibt jedes mal weiß. Der Inhalt ist folgender:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">


<head>
<title>Test</title>
<script type="text/javascript">
document.getElementsByTagName("body")[0].style.backgroundColor="rgb("+getRandomColor( 1, 250)+", "+getRandomColor( 1, 250)+", +"getRandomColor( 1, 250)+")";
</script>
</head>
<body>


</body>
</html>

Weiß jemand, warum das nicht geht?
 
Du hast die Funktion getRandomColor() nicht definiert. Das sollte in der JavaScript-Konsole für dich auch ersichtlich sein.

Moderation: Verschoben von HTML zu JavaScript.
 
Entschuldigung, was Javascript angeht, bin ich persönlich noch ziemlich unerfahren. In dem Thema, was mir gegeben wurde, habe ich dazu auch nicht viel gesehen.

Wie definiere ich die Funktion bzw. mit welchem Code mache ich das?

Gruß
Lukas
 
Stimmt, das war auf der verlinkten Seite unvollständig geschrieben.

Hier gibts so eine fertige Funktion:
lotterfriends.net » [Snippet/Javascript] Zufallsfarbe

Die müsstest Du in deinem Code so einbinden:

HTML: 
<script type="text/javascript">
[hier der code von o.g. Seite]
document.getElementsByTagName("body")[0].style.backgroundColor=zufallsFarbe();
</script>

Wenn etwas bei dir nicht geht, beschäftige dich mit der JavaScript-Fehlerkonsole.
Tipp: Google nach der angezeigten Fehlermeldung, wenn diese allgemeingehalten ist findet man immer irgendwo einen Hinweis was fehlt oder was falsch geschrieben ist.
 
OK, also wenn ich das richtig verstehe, muss der Code am Ende so aussehen:
Code: 
<script type="text/javascript">/**
*
* Zufallsfarbe im Hex-Format berechnen
*
* @return String Gibt eine Zufallsfarbe im Hex-Format
*                zurück z.B. #EFEFEF
*
*/
function zufallsFarbe() {
    var farbe = "#";
    for (var i in [0,1,2]) {
        farbe += (Math.ceil(255*Math.random()).toString(16).toUpperCase());
    }
    return farbe;
}
document.getElementsByTagName("body")[0].style.backgroundColor=zufallsFarbe();
</script>

Ist das so richtig?

Selbigen Code habe ich nun in den Head-Bereich meiner Datei getan.

Doch leider bleibt der Hintergrund bei jedem Aufruf weiß.
Test

Gruß
Lukas
 
Jetzt ist das Problem, dass der JavaScript-Code ausgeführt wird bevor der HTML-Code geladen wurde. Daher ist das body-Element (wie Du an der Fehlermeldung in der JavaScript-Konsole sehen kannst) nicht bekannt/vorhanden.

Hierfür gibt es 3 Lösungsmöglichkeiten:
a) Schreib
Code: 
document.getElementsByTagName("body")[0].style.backgroundColor=zufallsFarbe();
in einem <script>-Element direkt vor dem beendenden </body>-Tag. Dadurch würde es (vermutlich) erst ausgeführt werden, wenn alles andere geladen wurde.
b) Verwende den EventHandler window.onload um die Farbgebung erst auszuführen, wenn die Seite komplett geladen wurde. Beispiele:
Using window.onload
Tutorial - Combining Window Events
How to Use window.onload the Right Way - Robert Hahn
c) Verwende die JavaScript-Bibliothek jQuery um die Farbgebung erst auszuführen, wenn die Seite komplett geladen wurde. Dazu liefert jQuery die ready()-Funktion mit. Beispiele sind im Manual enthalten:
.ready() – jQuery API
 
Also ich habe erstmal Methode A gewählt. Das mit der Tatsache, dass es erst später geladen wird, als der Rest, kann ich persönlich nicht bestätigen, da der Inhalt meiner Testseite ja im Moment eh nur "Test" ist, das Laden der Seite dauert da ja wohl eh nicht so lange.:mrgreen: Ich werde mal schauen, wie sich das nach und nach entwickelt, wenn ich die Seite mit Inhalt fülle. Im Moment ist das erstmal eine gute Lösung. Wenn es damit Komplikationen gibt, melde ich mich dann.

Danke für deine Hilfe.

Gruß
Lukas
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben