Full version: jsB@nk » Background » Background Color Changer 2
URL: https://www.javascriptbank.com/background-color-changer-2.html
Input 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
<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--><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-->