[codigos javascripts]Menus para cambiar el color de fondo de sus web

:Hola!!!!: pues como dice el titulo les mostrare varios menus y tablas para cmbiar el color de fondo de sus paginas web, todos los codigos estan provados por mi en mi pagina, les dare el link correspondiente de la vista previa

Tabla de seleccion de color

Vista Previa

Código:

<script LANGUAGE="Javascript">

<!-- Begin
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");
  }
}
//  End -->
</script><center>
<form name="Interface">
    <table border="4" cellspacing="0" cellpadding="4">
        <tbody>
            <tr>
                <td colspan="3" align="center">Background</td>
                <td><input onKeyup="setBGHex(this.value)" name="bgHex" type="text" /></td>
                <td colspan="2" align="center">Foreground</td>
                <td><input onKeyup="setFGHex(this.value)" name="fgHex" type="text" /></td>
            </tr>
            <tr>
                <td>Red</td>
                <td><input type="button" onClick="incrementRed(true)" value=" + " /></td>
                <td><input type="button" onClick="decrementRed(true)" value=" - " /></td>
                <td><input onKeyup="setRed(this.value, true)" name="red" type="text" /></td>
                <td><input type="button" onClick="incrementRed(false)" value=" + " /></td>
                <td><input type="button" onClick="decrementRed(false)" value=" - " /></td>
                <td><input onKeyup="setRed(this.value, false)" name="redFG" type="text" /></td>
            </tr>
            <tr>
                <td>Green</td>
                <td><input type="button" onClick="incrementGreen(true)" value=" + " /></td>
                <td><input type="button" onClick="decrementGreen(true)" value=" - " /></td>
                <td><input onKeyup="setGreen(this.value, true)" name="green" type="text" /></td>
                <td><input type="button" onClick="incrementGreen(false)" value=" + " /></td>
                <td><input type="button" onClick="decrementGreen(false)" value=" - " /></td>
                <td><input onKeyup="setGreen(this.value, false)" name="greenFG" type="text" /></td>
            </tr>
            <tr>
                <td>Blue</td>
                <td><input type="button" onClick="incrementBlue(true)" value=" + " /></td>
                <td><input type="button" onClick="decrementBlue(true)" value=" - " /></td>
                <td><input onKeyup="setBlue(this.value, true)" name="blue" type="text" /></td>
                <td><input type="button" onClick="incrementBlue(false)" value=" + " /></td>
                <td><input type="button" onClick="decrementBlue(false)" value=" - " /></td>
                <td><input onKeyup="setBlue(this.value, false)" name="blueFG" type="text" /></td>
            </tr>
        </tbody>
    </table>
</form>
</center>

Tabla de colores

Vista Previa

Código:

<script LANGUAGE="Javascript">

<!-- Begin
function changeBackground(hexNumber) {
document.bgColor=hexNumber
}
prefix="#"
rnum1=0
bnum1=0
gnum1=0
rnum2=0
bnum2=0
gnum2=0
hexNumber2="#000000";
rcount=0;
bcount=0;
gcount=0;
function num2hex(num) {
if (num==15) return "f";
else if (num==14) return "e";
else if (num==13) return "d";
else if (num==12) return "c";
else if (num==11) return "b";
else if (num==10) return "a";
else if (num==9) return "9";
else if (num==8) return "8";
else if (num==7) return "7";
else if (num==6) return "6";
else if (num==5) return "5";
else if (num==4) return "4";
else if (num==3) return "3";
else if (num==2) return "2";
else if (num==1) return "1";
else return "0";
}
function changeBackground2(number) {
if(number == 1) {
rnum1=rcount%16;
if (rcount <15) {
rcount=rcount+1;
  }
}
if(number == 2) {
gnum1=gcount%16;
if (gcount <15) {
gcount=gcount+1;
  }
}
if(number == 3) {
bnum1=bcount%16;
if (bcount <15) {
bcount=bcount+1;
  }
}
if(number == 4) {
rnum1=rcount%16;
if (rcount > 0) {
rcount=rcount-1;
  }
}
if(number == 5) {
gnum1=gcount%16;
if (gcount > 0) {
gcount=gcount-1;
  }
}
if(number == 6) {
bnum1=bcount%16;
if (bcount > 0) {
bcount=bcount-1;
  }
 }
hexNumber2 = prefix+num2hex(rnum1)+num2hex(rnum2)+num2hex(gnum1)+num2hex(gnum2)+num2hex(bnum1)+num2hex(bnum2);
  document.bgColor=hexNumber2
}
// End -->
</script><center>
<form method="post" name="background">
    <table border="3" cellpadding="3" width="350">
        <tbody>
            <tr>
                <td align="center"><input type="button" onclick="changeBackground('#FF0000')" value="Red" /></td>
                <td align="center"><input type="button" onclick="changeBackground('#00FF00')" value="Green" /></td>
                <td align="center"><input type="button" onclick="changeBackground('#0000FF')" value="Blue" /></td>
                <td align="center"><input type="button" onclick="changeBackground('#FFFFFF')" value="White" /></td>
                <td align="center"><input type="button" onclick="changeBackground('#000000')" value="Black" /></td>
                <td align="center"><input type="button" onclick="changeBackground('#C0C0C0')" value="Grey" /></td>
            </tr>
        </tbody>
    </table>
    <table border="3" cellpadding="3" width="350">
        <tbody>
            <tr>
                <td><center>Variable Background Color Changer</center></td>
            </tr>
        </tbody>
    </table>
    <table border="3" cellpadding="3" width="350">
        <tbody>
            <tr>
                <td align="center"><input type="button" onclick="changeBackground2(1)" value="+ Red" />
                <p><input type="button" onclick="changeBackground2(4)" value="- Red" /></p>
                </td>
                <td align="center"><input type="button" onclick="changeBackground2(2)" value="+ Green" />
                <p><input type="button" onclick="changeBackground2(5)" value="- Green" /></p>
                </td>
                <td align="center"><input type="button" onclick="changeBackground2(3)" value="+ Blue" />
                <p><input type="button" onclick="changeBackground2(6)" value="- Blue" /></p>
                </td>
            </tr>
        </tbody>
    </table>
    <table border="3" cellpadding="3" width="350">
        <tbody>
            <tr>
                <td><center>Keep pressing buttons to change color<br />
                (The color will start as black)</center></td>
            </tr>
        </tbody>
    </table>
</form>
</center>

Fondo aleatorio con boton

Vista Previa

Código:

<script LANGUAGE="Javascript">

<! >
<! >

<!-- Begin
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";
}
// End -->
</script><center>
<form>
    <input type="button" onClick="randombackground()" value="Get Another Random Background" />
</form>
</center>

Fondo aleatorio con link

Vista Previa

Código:

<script LANGUAGE="Javascript">

<! >
<! >

<!-- Begin
function rnd(scale) {
var dd=new Date();     
return((Math.round(Math.abs(Math.sin(dd.getTime()))*1000000000)%scale));
}
function show() {     
document.blah.bg.value=document.bgColor;       
document.blah.fg.value=document.fgColor;
}
document.fgColor=256*rnd(255)+16*rnd(255)+rnd(255);
document.bgColor=256*rnd(255)+16*rnd(255)+rnd(255);
// End -->
</script>

<CENTER>
<a href="javascript:history.go(0)">Click here to get new colors</a>
</center>
<FORM name=blah>
<table border=0 width=100%><tr><td align=left>Foreground color</td>
<TD align=right>Background color</TD>
</TR>
<TR>
<TD align=left>
<input type=text name=fg>
</TD>
<TD align=right>
<input type=text name=bg>
</TD>
</TR>
</TABLE>
</FORM>
</CENTER>

Seleccion en forma de ruleta

Vista Previa

Código:

<script LANGUAGE="Javascript">

<!-- Begin
color=new Array("0","8","F");
speed=250;
document.bgColor="FFFFFF";
bg=new Array("FFFFFF","FFFFFF","FFFFFF");
function begin() {
document.form.col1.value=" X "; document.form.col2.value=" X ";
document.form.col3.value=" X "; i=0; roll(speed);
}
function roll(speedB) {
if (document.form.col1.value==" X ") {
document.form.c1.value=document.form.b1.value;
document.form.b1.value=document.form.a1.value;
document.form.a1.value=
color[Math.round(Math.random()*10)%3]+
color[Math.round(Math.random()*10)%3];
}
if (document.form.col2.value==" X ") {
document.form.c2.value=document.form.b2.value;
document.form.b2.value=document.form.a2.value;
document.form.a2.value=
color[Math.round(Math.random()*10)%3]+
color[Math.round(Math.random()*10)%3];
}
if (document.form.col3.value==" X ") {
document.form.c3.value=document.form.b3.value;
document.form.b3.value=document.form.a3.value;
document.form.a3.value=
color[Math.round(Math.random()*10)%3]+
color[Math.round(Math.random()*10)%3];
}
setTimeout("roll("+speedB+")",speedB);
}
function stop(col) {
if (col==1) {document.form.col1.value="  ";i++;}
if (col==2) {document.form.col2.value="  ";i++;}
if (col==3) {document.form.col3.value="  ";i++;}
if (i==3) {
bg[0]=document.form.a1.value+
document.form.a2.value+
document.form.a3.value;
bg[1]=document.form.b1.value+
document.form.b2.value+
document.form.b3.value;
bg[2]=document.form.c1.value+
document.form.c2.value+
document.form.c3.value;
speedB=500000;roll(speedB);
  }
}
function view(letter) {
document.bgColor=bg[letter];
document.form.color.value="#"+bg[letter];
}
// End -->
</script>

<center>
<form name="form">
<table cellpadding=2>
<tr><td align=center>
<input type=text name="a1" size=2 onFocus="this.blur()" value=" ">
<input type=text name="a2" size=2 onFocus="this.blur()" value=" ">
<input type=text name="a3" size=2 onFocus="this.blur()" value=" ">
<input type=button onClick="view(0)" value="View"><br>
<input type=text name="b1" size=2 onFocus="this.blur()" value=" ">
<input type=text name="b2" size=2 onFocus="this.blur()" value=" ">
<input type=text name="b3" size=2 onFocus="this.blur()" value=" ">
<input type=button onClick="view(1)" value="View"><br>
<input type=text name="c1" size=2 onFocus="this.blur()" value=" ">
<input type=text name="c2" size=2 onFocus="this.blur()" value=" ">
<input type=text name="c3" size=2 onFocus="this.blur()" value=" ">
<input type=button onClick="view(2)" value="View"><br>
<input type=button onClick="stop(1)" value=" X " name="col1">
<input type=button onClick="stop(2)" value=" X " name="col2">
<input type=button onClick="stop(3)" value=" X " name="col3">
        </td>
<td valign=middle align=center>
<input type=button onClick="begin()" value="Spin!"><p>
<table bgcolor=FFFFFF border=1 cellspacing=0>
<tr><td align=center valign=middle>"X" stops each wheel.<p>
BG Color = <input type=text size=7 value="#FFFFFF" name=color>
</td></tr>
</table>
</td></tr>
</table>
</form>
</center>

Fader(cambio automatico de color)

Vista Previa

Código:

<script LANGUAGE="Javascript">

<!-- Begin
var COLOR = 999999
var woot = 0
function stoploop() {
document.bgColor = '#000000';
clearTimeout(loopID);
}
function loopBackground() {
if (COLOR > 0) {
document.bgColor = '#' + COLOR
COLOR -= 111111
loopID = setTimeout("loopBackground()",1)
} else {
document.bgColor = '#000000'
woot += 10
COLOR = 999999
COLOR -= woot
loopID = setTimeout("loopBackground()",1)
  }
}
// End -->
</script><center>
<form name="background">
    <input type="button" onclick="loopBackground()" value="Start bgColor WARP" /> <br />
    <input type="button" onClick="stoploop()" value="Stop bgColor WARP" />
</form>
</center>

fuente: http://javascript.internet.com

:) [b]Hola amigos tambien cuando necesiten mirar un codigo prueben el probador de codigos esta 100% funcionando esta en el portal :)

tan bueno ese codigo