Background Color Changer



	Maybe there is no actual place called Hell. Maybe Hell is just having to listen to our grandparents breathe through their noses when they're eating sandwiches.

BrettBits > Java and Javascript Programs > Background Color Changer

To use this Javascript for your own, copy the contents of the textbox below, and paste them into Notepad. Then, save the contents as a .htm or .html file. The Javascript is now yours! Just ensure you give me proper credit for creating it.

Javascript Source Code

//Author: Brett McLean
//Email Address: brettbits@hotmail.com
//Website: http://www.brettbits.com/

var sixteen;
var one;
var red;
var green;
var blue;
var colorCode;
var inputType = "dec";

var ralpha = "0123456789ABCDEF";
var temppos;
var rnumber;

hexArray = new Array();
hexArray[0] = "0";
hexArray[1] = "1";
hexArray[2] = "2";
hexArray[3] = "3";
hexArray[4] = "4";
hexArray[5] = "5";
hexArray[6] = "6";
hexArray[7] = "7";
hexArray[8] = "8";
hexArray[9] = "9";
hexArray[10] = "A";
hexArray[11] = "B";
hexArray[12] = "C";
hexArray[13] = "D";
hexArray[14] = "E";
hexArray[15] = "F";

rhexArray = new Array();
rhexArray[0] = "F";
rhexArray[1] = "E";
rhexArray[2] = "D";
rhexArray[3] = "C";
rhexArray[4] = "B";
rhexArray[5] = "A";
rhexArray[6] = "9";
rhexArray[7] = "8";
rhexArray[8] = "7";
rhexArray[9] = "6";
rhexArray[10] = "5";
rhexArray[11] = "4";
rhexArray[12] = "3";
rhexArray[13] = "2";
rhexArray[14] = "1";
rhexArray[15] = "0";

function d2h(number) { //converts a decimal number to hexadecimal
	sixteen = Math.floor(number/16); //value in the 16s position
	one = Math.floor(number-(sixteen*16)); //value in the 1s position
	sixteen = hexArray[sixteen]; //hex representation of the value in the 16s position
	one = hexArray[one]; //hex respresentation of the value in the 1s position
	number = sixteen + one; //concatenate string values of hex digits
	return number;
}

function h2d(number) { //converts hexadecimal numbers to decimal equivalents

if(number.substring(0,1) == "F") {
			sixteen = 15;
	} else 	if(number.substring(0,1) == "E") {
			sixteen = 14;
	} else 	if(number.substring(0,1) == "D") {
			sixteen = 13;
	} else 	if(number.substring(0,1) == "C") {
			sixteen = 12;
	} else 	if(number.substring(0,1) == "B") {
			sixteen = 11;
	} else 	if(number.substring(0,1) == "A") {
			sixteen = 10;
	} else {
		sixteen = eval(number.substring(0,1));
	}
	sixteen = sixteen * 16;
	if(number.substring(1,2) == "F") {
			one = 15;
	} else if(number.substring(1,2) == "E") {
			one = 14;
	} else if(number.substring(1,2) == "D") {
			one = 13;
	} else if(number.substring(1,2) == "C") {
			one = 12;
	} else if(number.substring(1,2) == "B") {
			one = 11
	} else if(number.substring(1,2) == "A") {
			one = 10;
	} else {
		one = eval(number.substring(1,2));
	}
	return sixteen + one; //return sum of these decimal numbers
}

function changeFgColor(number) { //this function receives the background's hexadecimal color code
				//as a parameter, and then returns a suitable font color that would
				//be visible on that background color
	rnumber = "";
	for(i=0; i <= number.length-1; i++) {
		temppos = ralpha.indexOf(number.charAt(i));
		rnumber = rnumber + rhexArray[temppos];
	}
	return rnumber;
}

//if program reaches this point, the color code is to be based on inputted decimal values,
	//as opposed to hexadecimal values

//check red's value range
	if (eval(document.colorform.redtext.value) > 255 || eval(document.colorform.redtext.value) < 0) {
		alert("All values must be and less than or equal to 255 and greater than or equal to 0.");
		return false;
	}
	//check green's value range
	if (eval(document.colorform.greentext.value) > 255 || eval(document.colorform.greentext.value) < 0) {
		alert("All values must be and less than or equal to 255 and greater than or equal to 0.");
		return false;
	}
	//check blue's value range
	if (eval(document.colorform.bluetext.value) > 255 || eval(document.colorform.bluetext.value) < 0) {
		alert("All values must be and less than or equal to 255 and greater than or equal to 0.");
		return false;
	}

red = d2h(eval(document.colorform.redtext.value)); //convert red's decimal value to hex
	green = d2h(eval(document.colorform.greentext.value));//convert green's decimal value to hex
	blue = d2h(eval(document.colorform.bluetext.value)); //convert blue's decimal value to hex

colorCode = red + green + blue; //create hexadecimal color code
	document.bgColor = colorCode; //set background color
	document.fgColor = changeFgColor(colorCode); //change font color to something readable
	document.colorform.hextext.value = "#" + colorCode; //rewrite hex's text field with new color code
}

function changeInput(type) {
	inputType = type; //inputType is to determine whether the user is changing the decimal text fields,
			//or the hexadecimal text fields
}

function instruct() { //alerts user with instructions
	alert("Enter a Red, Green, or Blue value of 0 to 255 \nor enter a 6 digit Color Code of numbers 0-9\nand letters A-F then click Change Background.");
}
-->
</script>

Red:<input type="text" name="redtext" size="3" value="255" onfocus="changeInput('dec')" />
Green:<input type="text" name="greentext" size="3" value="255" onfocus="changeInput('dec')" />
Blue:<input type="text" name="bluetext" size="3" value="255" onfocus="changeInput('dec')" />
</td></tr><tr><td align="center">
Color Code: <input type="text" name="hextext" size="7" value="#FFFFFF" onfocus="changeInput('hex')" />
<br />
<input type = "submit" value="Change Background" />

</td></tr>
<tr><td align="center">
<input type = "button" value ="Instructions" onclick="instruct()" />
</td></tr>
</table>
</center>

</form>

Alternatively, you can download the source .html file itself by right-clicking on the Download button below, and click "Save Target As..." or "Save Link As...":

Share This Page!