Random Background Color, JavaScript 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.

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.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

<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 into <body> tags

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

Instruction:

Change the following text:

YOUR TEXT HERE = Text on the button.

Webmaster » Web Programming » JavaScript » Background Effects » Random Background Color

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links