2012-03-24 9 views
3

Diese Webseite ändert die Hintergrundfarbe zufällig. Ich habe Probleme mit "#title", aber die Farbe bleibt gleich.Wie ändert man die Hintergrundfarbe zufällig in HTML mit JavaScript?

bitte helfen

Danke

JavaScript-Code:

function setbackground() 
{ 
    window.setTimeout("setbackground()", 80); // milliseconds delay 

    var index = Math.round(Math.random() * 9); 

    var ColorValue = "FFFFFF"; // default color - white (index = 0) 

    if(index == 1) 
     ColorValue = "66FF33"; 
    if(index == 2) 
     ColorValue = "FF0000"; 
    if(index == 3) 
     ColorValue = "FF00FF"; 
    if(index == 4) 
     ColorValue = "0000FF"; 
    if(index == 5) 
     ColorValue = "00FFFF"; 
    if(index == 6) 
     ColorValue = "FFFF00"; 
    if(index == 7) 
     ColorValue = "CC66FF"; 
    if(index == 8) 
     ColorValue = "3366FF"; 
    if(index == 9) 
     ColorValue = "CCCCCC"; 

    document.getElementsByTagName("body")[0].style.backgroundColor = "#" + ColorValue; 

} 

function setbackgroundTitle() 
{ 
    window.setTimeout("setbackgroundTitle()", 600); // milliseconds delay 

    var index = Math.round(Math.random() * 4); 

    var ColorValue = "FFFFFF"; // default color - white (index = 0) 

    if(index == 1) 
     ColorValue = "66FF33"; 
    if(index == 2) 
     ColorValue = "FF0000"; 
    if(index == 3) 
     ColorValue = "FF00FF"; 
    if(index == 4) 
     ColorValue = "0000FF"; 


    document.getElementById("title")[0].style.backgroundColor = "#" + ColorValue; 

} 

CSS-Code:

#title{ 
    background-color:#11f22f; 
    height:300px; 
    width:400px; 
    margin:25px auto 0 auto; 
    -moz-border-radius:25px; 
    -webkit-border-radius:25px; 
} 

html-Code:

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>HomeWork</title> 
     <script type="text/javascript" src="crazy.js"> </script> 
     <link rel="stylesheet" type="text/css" href="HomeWork2.css" /> 

    </head> 
    <body> 

    <body onload="setbackground();"> 
     <div id="title" onload="setbackgroundTitle();"> hjhjhkj dfvdfsv dfgvkdfsk dfs</div> 
    </body> 
</html> 
so
+0

In Zukunft, verwenden Sie anonyme Funktionen im Gegensatz zu Zeichenfolgen für 'setTimeout'. 'setTimeout (function() {setbackgroundTitle()}, 600)' wird ausreichen. –

+0

__Allgemeiner Codehinweis: __ Wenn Sie mehrere if-Anweisungen wie diese haben, werden sie jedes Mal ausgeführt, auch wenn der Index 1 ist. Verwenden Sie stattdessen eine switch-Anweisung. Oder in diesem Fall ist eine noch bessere Lösung, alle Farbwerte in einem Array zu speichern und myColorArray [index] zu verwenden, um Ihren Wert zu erhalten. –

+0

Dies ist das gleiche wie http://stackoverflow.com/questions/25455485/how-change-background-color-of-html-elements-with-javascript-in-a-certain-time-p/25455719#25455719 –

Antwort

1

Kopieren Sie zunächst Paste Fehler: Statt document.getElementById("title")[0].style.backgroundColor = "#" + ColorValue; sollte es mit diesem How to make a div onload function?document.getElementById("title").style.backgroundColor = "#" + ColorValue; Laut sein funktioniert nicht. Ich habe alles auf setbackground() gesetzt und es funktioniert;)

+0

danke ich habe alles auf setbackground() verschoben und es funktioniert – toky

1

versuchen:

document.getElementById("title").style.backgroundColor = "#" + ColorValue; 
+0

keine Änderung, vielleicht ist das Problem in der HTML-Datei. irgendwelche Vorschläge? – toky

0

Wenn die Hausaufgaben ist, geben Sie bitte Ihre Frage als Hausaufgaben etikettieren.

Else, jQuery würde Ihr Leben so einfach wie machen:

$("body").css("background", "#456789"); 

oder

$("h1").css("background", "#456789"); 
+0

Es ist kein etikettiertes jQuery zu getippt :) – Starx

+0

Nicht markiert jQuery bedeutet nicht, dass ich keine einfache Lösung für eine Frage vorschlagen sollte. Ab heute sehe ich keinen Sinn darin, in 95% der Fälle reines Javascript zu verwenden (Hausaufgaben sind ein guter Grund, um die Sprache zu lernen :) –

+0

Jungs im jQuery-Projekt würden sicherlich den Punkt sehen. Beruhige dich, Mann. – Starx

0

Das Problem kann sein, dass das DOM nicht geladen wurde, wenn das Skript ausgeführt wurde.

Korrigieren Sie Ihre Funktion dazu, Sie nehmen die Ausgabe von document.getElementById("title") als Array an, aber es ist nicht.

document.getElementById("title").style.backgroundColor = "#" + ColorValue; 

Und es auf dem Onload-Ereignis nennen, das DOM, um sicherzustellen, ordnungsgemäß geladen ist, wenn das Skript

läuft
window.onload = function() { 
setbackgroundTitle(); 
}; 
Verwandte Themen