Home » Webmaster Tools and Resources » Software & Scripts » JavaScript » Random Background Effects »

Random Background Color Effects Code

This is a JavaScript for html to change color of website background with the touch of a button. It changes the color randomly with the preset colors of you choice.

There are two parts of code you need to put into your HTML. As you seen in the text area bellow, first one insert between <head> </head> tags, and second code insert into your HTML body tags where you want to show this button for clicks.

View Demo

The color names inside the code are preset, you can change it as you wish. You can refer to the W3C HTML Color Names for more details about complete list of the color names which is supported by all major browsers.

Instructions:
1. Add the designated script to the HEAD of your HTML document.
2. Place the last script into the BODY of your HTML document.

Insert this code before </head>

<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function backcolor(form) {
temp = ""
for (var i = 0; i < 16; i++) {
temp = form.color[i].value
if (form.color[i].checked){ document.bgColor = temp }
   }
}
function randombackground() {
document.bgColor = getColor()
}
function getColor(){
currentdate = new Date()
backgroundcolor = currentdate.getSeconds()
if (backgroundcolor > 44)
backgroundcolor = backgroundcolor - 45
else if (backgroundcolor > 29)
backgroundcolor = backgroundcolor - 30
else if (backgroundcolor > 15)
backgroundcolor = backgroundcolor - 16
if (backgroundcolor == 0 )
return "olive";
else if (backgroundcolor == 1 )
return "teal";
else if (backgroundcolor == 2 )
return "red";
else if (backgroundcolor == 3 )
return "blue";
else if (backgroundcolor == 4 )
return "maroon";
else if (backgroundcolor == 5 )
return "navy";
else if (backgroundcolor == 6 )
return "lime";
else if (backgroundcolor == 7 )
return "fuschia";
else if (backgroundcolor == 8 )
return "green";
else if (backgroundcolor == 9 )
return "purple";
else if (backgroundcolor == 10 )
return "gray";
else if (backgroundcolor == 11 )
return "yellow";
else if (backgroundcolor == 12 )
return "aqua";
else if (backgroundcolor == 13 )
return "black";
else if (backgroundcolor == 14 )
return "white";
else if (backgroundcolor == 15 )
return "silver";
}
// End -->
</SCRIPT>

Insert this code before </body>

<CENTER>
<FORM>
<input type="button" value="YOUR TEXT HERE" onClick="randombackground()">
</FORM>
</CENTER>

Related Resources: