»
EnglishFrenchVietnamese

Print - Background Color Changer 2 - JavaScriptBank.com

Full version: jsB@nk » Background » Background Color Changer 2
URL: https://www.javascriptbank.com/background-color-changer-2.html

Background Color Changer 2 © JavaScriptBank.comInput color codes, either as RGB numbers, or as a 6 character hexadecimal code, then test it to see how it will look on the page. Great for testing color schemes!

Full version: jsB@nk » Background » Background Color Changer 2
URL: https://www.javascriptbank.com/background-color-changer-2.html



JavaScript
<script language="javascript">/*     This script downloaded from www.JavaScriptBank.com     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/// Created by: Brett McLean :: 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;}function changeBgColor() { //this function reads in values from the text fields, parses the text//as a color code, and then changes the background color if(inputType == "hex") { //if user has changed the hexadecimal field  document.colorform.hextext.value = document.colorform.hextext.value.toUpperCase();  if(document.colorform.hextext.value.substring(0,1) == "#") { //if user placed "#" in front of hex color code   colorCode = document.colorform.hextext.value.substring(1,7);  } else {  colorCode = document.colorform.hextext.value.substring(0,6); }document.colorform.redtext.value = h2d(colorCode.substring(0,2)); //converts to red's decimal valuedocument.colorform.greentext.value = h2d(colorCode.substring(2,4)); //converts to red's decimal valuedocument.colorform.bluetext.value = h2d(colorCode.substring(4,6)); //converts to red's decimal valuedocument.bgColor = colorCode; //change background colordocument.fgColor = changeFgColor(colorCode); //change font color to something readablereturn false; //exit function}//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 Hex Color Code using numbers 0-9\nand letters A-F then click Change Background.");}</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<div style="width: 300px; background-color: #fff; color: #00009C; text-align: center; line-height: 1.5em;"><form name="colorform" onSubmit="changeBgColor(); return false;">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')"><br>Hex Code: <input type="text" name="hextext" size="7" value="#FFFFFF" onfocus="changeInput('hex')"><br><input type="submit" value="Change Background" style="background-color: #00009C; color: #fff;"><br><input type="button" value="Instructions" onclick="instruct()" style="background-color: #00009C; color: #fff;"></form></div><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->