Example : Color Chooser in Background and Foreground by using '+' and '-' buttons
for increment and decrement value
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Color Chooser in Background and
Foreground</title>
<script language="javascript">
redValue = 255;
blueValue = 255;
greenValue = 255;
redForeValue = 0;
blueForeValue = 0;
greenForeValue = 0;
maxValue = 255;
hexValues = new
Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
i = 0;
function toHex(integer) {
hexDigit1 = Math.floor(integer / 16);
hexDigit2 = (integer % 16);
return hexValues[hexDigit1] + hexValues[hexDigit2];
}
function shiftFG() {
redFGHex = toHex(redForeValue);
blueFGHex = toHex(blueForeValue);
greenFGHex = toHex(greenForeValue);
bigFGHex = redFGHex + greenFGHex + blueFGHex;
document.fgColor = bigFGHex;
document.Interface.fgHex.value = bigFGHex;
document.Interface.redFG.value = redForeValue;
document.Interface.blueFG.value = blueForeValue;
document.Interface.greenFG.value = greenForeValue;
}
function shiftBG() {
redHex = toHex(redValue);
blueHex = toHex(blueValue);
greenHex = toHex(greenValue);
bigHex = redHex + greenHex + blueHex;
document.bgColor = bigHex;
document.Interface.bgHex.value = bigHex;
document.Interface.red.value = redValue;
document.Interface.blue.value = blueValue;
document.Interface.green.value = greenValue;
}
function incrementRed(isBackground) {
if (isBackground == true ) {
redValue = redValue + 8;
if (redValue > maxValue) {
redValue = 0;
}
shiftBG();
}
if (isBackground == false) {
redForeValue = redForeValue + 8;
if (redForeValue > maxValue) {
redForeValue = 0;
}
shiftFG();
}
}
function decrementRed(isBackground) {
if (isBackground == true) {
redValue = redValue - 8;
if (redValue < 0 ) {
redValue = 255;
}
shiftBG();
}
else {
redForeValue = redForeValue - 8;
if (redForeValue < 0) {
redForeValue = 255;
}
shiftFG();
}
}
function setRed(value, isBackground) {
if(value > -1 && value < 256) {
if( isBackground == true ) {
redValue = value;
shiftBG();
}
else {
redForeValue = value;
shiftFG();
}
}
}
function incrementBlue(isBackground) {
if ( isBackground == true ) {
blueValue = blueValue + 8;
if (blueValue > maxValue) {
blueValue = 0;
}
shiftBG();
}
else {
blueForeValue = blueForeValue + 8;
if ( blueForeValue > maxValue ) {
blueForeValue = 0;
}
shiftFG();
}
}
function decrementBlue(isBackground) {
if (isBackground == true) {
blueValue = blueValue - 8;
if (blueValue < 0) {
blueValue = 255;
}
shiftBG();
}
else {
blueForeValue = blueForeValue - 8;
if (blueForeValue < 0) {
blueForeValue = 255;
}
shiftFG();
}
}
function setBlue(value, isBackground) {
if (value > -1 && value < 256) {
if ( isBackground == true ) {
blueValue = value;
shiftBG();
}
else {
blueForeValue = value;
shiftFG();
}
}
}
function incrementGreen(isBackground) {
if (isBackground == true) {
greenValue = greenValue + 8;
if (greenValue > maxValue) {
greenValue = 0;
}
shiftBG();
}
else {
greenForeValue = greenForeValue + 8;
if (greenForeValue > maxValue) {
greenForeValue = 0;
}
shiftFG();
}
}
function decrementGreen(isBackground) {
if (isBackground == true) {
greenValue = greenValue - 8;
if (greenValue < 0 ) {
greenValue = 255;
}
shiftBG();
}
else {
greenForeValue = greenForeValue - 8;
if (greenForeValue < 0) {
greenForeValue = 255;
}
shiftFG();
}
}
function setGreen(value, isBackground) {
if ( value > -1 && value < 256 ) {
if ( isBackground == true ) {
greenValue = value;
shiftBG();
}
else {
greenForeValue = value;
shiftFG();
}
}
}
function unHex(string, fgbg) {
hex = string.toUpperCase();
counter = 0;
while (hex.charAt(0) != hexValues[counter])
counter++;
r = 16 * counter;
counter = 0;
while (hex.charAt(1) !=
hexValues[counter])
counter++;
r = r + counter;
counter = 0;
while (hex.charAt(2) != hexValues[counter])
counter++;
g = 16 * counter;
counter = 0;
while (hex.charAt(3) != hexValues[counter])
counter++;
g = g + counter;
counter = 0;
while (hex.charAt(4) != hexValues[counter])
counter++;
b = 16 * counter;
counter = 0;
while (hex.charAt(5) != hexValues[counter])
counter++;
b = b + counter;
if (fgbg == "bg") {
redValue = r;
blueValue = b;
greenValue = g;
document.Interface.red.value = redValue;
document.Interface.blue.value = blueValue;
document.Interface.green.value = greenValue;
}
if (fgbg == "fg") {
redForeValue = r;
blueForeValue = b;
greenForeValue = g;
document.Interface.redFG.value = redForeValue;
document.Interface.blueFG.value = blueForeValue;
document.Interface.greenFG.value = greenForeValue;
}
}
function validChar(char) {
for (j = 0; j < hexValues.length; j++) {
if (char == hexValues[j]) {
return true;
}
}
return false;
}
function isHex(string) {
if (string.length != 6) {
return false;
}
for (k = 0; k < 6; k++) {
if (! validChar(string.charAt(k))) {
return false;
}
}
return true;
}
function setBGHex(value) {
if (isHex(value.toUpperCase())) {
document.bgColor = value;
unHex(value, "bg");
}
}
function setFGHex(value) {
if (isHex(value.toUpperCase())) {
document.fgColor = value;
unHex(value, "fg");
}
}
</script>
</head>
<body>
<center>
<h3> Color Chooser in Background and Foreground by
using '+' and '-' buttons for increment and decrement value</h3>
<form name=Interface>
<table border=4 cellspacing=0 cellpadding=4>
<tr>
<td colspan=3 align=center>Background</td>
<td><input type=text name=bgHex
onKeyup="setBGHex(this.value)"></td>
<td colspan=2 align=center>Foreground</td>
<td><input type=text name=fgHex
onKeyup="setFGHex(this.value)"></td>
</tr>
<tr>
<td>Red</td>
<td><input type=button value=" + "
onClick="incrementRed(true)"></td>
<td><input type=button value=" - "
onClick="decrementRed(true)"></td>
<td><input type=text name="red"
onKeyup="setRed(this.value, true)"></td>
<td><input type=button value=" + "
onClick="incrementRed(false)"></td>
<td><input type=button value=" - "
onClick="decrementRed(false)"></td>
<td><input type=text name=redFG
onKeyup="setRed(this.value, false)"></td>
</tr>
<tr>
<td>Green</td>
<td><input type=button value=" + "
onClick="incrementGreen(true)"></td>
<td><input type=button value=" - "
onClick="decrementGreen(true)"></td>
<td><input type=text name="green"
onKeyup="setGreen(this.value, true)"></td>
<td><input type=button value=" + "
onClick="incrementGreen(false)"></td>
<td><input type=button value=" - "
onClick="decrementGreen(false)"></td>
<td><input type=text name=greenFG
onKeyup="setGreen(this.value, false)"></td>
</tr>
<tr>
<td>Blue</td>
<td><input type=button value=" + "
onClick="incrementBlue(true)"></td>
<td><input type=button value=" - "
onClick="decrementBlue(true)"></td>
<td><input type=text name="blue" onKeyup="setBlue(this.value,
true)"></td>
<td><input type=button value=" + "
onClick="incrementBlue(false)"></td>
<td><input type=button value=" - "
onClick="decrementBlue(false)"></td>
<td><input type=text name=blueFG
onKeyup="setBlue(this.value, false)"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
