Select Background Color

[Total: 0    Average: 0/5]

Background color can be choosen on a mouseover, a button click, or a radio button selection.

Body Code:

<script language="Javascript">
<!-- 

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";	
	}
// -->
</script>
<p><A HREF="#" onMouseOver="randombackground()">
Choose a random background color using onMouseOver</A><p><hr>
<form>Click on the button to choose a random background color<p>
<input type="button" value="Random" onClick="randombackground()">
</form><hr>
<form name="backcolorform">Select a background color.<p>
<table><tr><td><input type="radio" name="color" value="green" onClick="backcolor(this.form)">Green</td><td><input type="radio" name="color" value="aqua" onClick="backcolor(this.form)">Aqua</td><td><input type="radio" name="color" value="red" onClick="backcolor(this.form)">Red</td><td><input type="radio" name="color" value="olive" onClick="backcolor(this.form)">Olive</td></tr><tr><td><input type="radio" name="color" value="teal" onClick="backcolor(this.form)">Teal</td><td><input type="radio" name="color" value="blue" onClick="backcolor(this.form)">Blue</td><td><input type="radio" name="color" value="maroon" onClick="backcolor(this.form)">Maroon</td><td><input type="radio" name="color" value="navy" onClick="backcolor(this.form)">Navy</td></tr><tr><td><input type="radio" name="color" value="gray" onClick="backcolor(this.form)">Gray</td><td><input type="radio" name="color" value="lime" onClick="backcolor(this.form)">Lime</td><td><input type="radio" name="color" value="fuschia" onClick="backcolor(this.form)">Fuschia</td><td><input type="radio" name="color" value="white" onClick="backcolor(this.form)">White</td></tr><tr><td><input type="radio" name="color" value="purple" onClick="backcolor(this.form)">Purple</td><td><input type="radio" name="color" value="silver" onClick="backcolor(this.form)">Silver</td><td><input type="radio" name="color" value="yellow" onClick="backcolor(this.form)">Yellow</td><td><input type="radio" name="color" value="black" onClick="backcolor(this.form)">Black</td></tr>
</table>
</form>

Times Viewed: 2

Leave a Reply

Your email address will not be published. Required fields are marked *