 |
| | | | | | | |
|
|
|
 |
Fabricador de código de colores |
|
|
|
|
|
Script que crea un formulario con barras deslizantes para crear el color deseado y obtener su código hexadecimal.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="0">
<TR>
<TD ALIGN="center" COLSPAN="5" BGCOLOR="#9D9DFF">
<P ALIGN="center"><B><FONT SIZE="-1"
FACE="Arial, Helvetica">Fabricador de Código de Colores</FONT></B></P>
</TD>
</TR>
<TR>
<TD>
<P ALIGN="left"></P>
<P ALIGN="left"></P>
<P ALIGN="left"></P> </TD>
<TD>
<FORM>
<P ALIGN="center"><FONT SIZE="-1"
FACE="Arial, Helvetica">Rojo</FONT>
<INPUT TYPE="button" VALUE="-" ONCLICK="redmenos()"><INPUT TYPE="button"
VALUE="+" ONCLICK="redmas()"> </P>
<P ALIGN="center"><FONT SIZE="-1"
FACE="Arial, Helvetica">Verde</FONT>
<INPUT TYPE="button" VALUE="-" ONCLICK="greenmenos()">
<INPUT TYPE="button" VALUE="+" ONCLICK="greenmas()"> </P>
<P ALIGN="center"><FONT SIZE="-1"
FACE="Arial, Helvetica">Azul</FONT>
<INPUT TYPE="button" VALUE="-" ONCLICK="bluemenos()">
<INPUT TYPE="button" VALUE="+" ONCLICK="bluemas()"> </P> </FORM></TD>
<TD>
<FORM METHOD="POST" NAME="formac">
<P ALIGN="center">Dec<BR>
<!--webbot bot="Validation" s-data-type="Number"
s-number-separators="x." i-maximum-length="3" --><INPUT TYPE="text"
SIZE="3" MAXLENGTH="3" NAME="redcode" VALUE="00" ONCHANGE="cambior()"> </P>
<P ALIGN="center"><!--webbot bot="Validation"
s-data-type="Number" s-number-separators="x."
i-maximum-length="3" --><INPUT TYPE="text" SIZE="3" MAXLENGTH="3"
NAME="greencode" VALUE="00" ONCHANGE="cambiog()"> </P>
<P ALIGN="center"><!--webbot bot="Validation"
s-data-type="Number" s-number-separators="x."
i-maximum-length="3" --><INPUT TYPE="text" SIZE="3" MAXLENGTH="3"
NAME="bluecode" VALUE="00" ONCHANGE="cambiob()"> </P> </FORM> </TD>
<TD>
<FORM METHOD="POST" NAME="hexad">
<P><FONT SIZE="-1" FACE="Arial, Helvetica">Hex</FONT><BR>
<INPUT TYPE="text" SIZE="3" MAXLENGTH="2" NAME="hr" VALUE="00"
ONFOCUS="blur()"></P>
<P><INPUT TYPE="text" SIZE="3" MAXLENGTH="2" NAME="hg" VALUE="00"
ONFOCUS="blur()"></P>
<P><INPUT TYPE="text" SIZE="3" MAXLENGTH="2" NAME="hb" VALUE="00"
ONFOCUS="blur()"></P> </FORM> </TD>
<TD COLSPAN="2">
<FORM METHOD="POST" NAME="forma">
<P><FONT SIZE="-1" FACE="Arial, Helvetica">Código final
</FONT><INPUT TYPE="text" SIZE="8" NAME="codigo" ONFOCUS="blur()"></P>
<P><FONT SIZE="-1" FACE="Arial, Helvetica">Este es el
color.</FONT><INPUT TYPE="button" NAME="bot"
VALUE=" " ID="bot"></P>
<P><FONT SIZE="-1" FACE="Arial, Helvetica">Método
direct</FONT>o
<INPUT TYPE="text" SIZE="8" MAXLENGTH="7" NAME="dir" ONCHANGE="directo()"></P>
</FORM> </TD>
</TR>
<TR>
<TD COLSPAN="5"><HR WIDTH="45%" COLOR="#0000FF"> </TD>
</TR>
<TR>
<TD ALIGN="right"> </TD>
<TD ALIGN="right" COLSPAN="3">
<FORM METHOD="POST" NAME="form">
<P><FONT SIZE="-1" FACE="Arial, Helvetica">Valor del
incremento</FONT>
<SELECT NAME="menu" SIZE="1">
<OPTION VALUE="1">> 1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="5">5</OPTION>
<OPTION VALUE="10">10</OPTION>
<OPTION VALUE="16">> 16</OPTION>
<OPTION VALUE="20">20</OPTION>
<OPTION VALUE="50">50</OPTION>
<OPTION VALUE="100">100</OPTION>
</SELECT> </P> </FORM> </TD>
<TD ALIGN="right">
<FORM><INPUT TYPE="submit" VALUE="Ayuda" ONCLICK="ayuda()"
STYLE="cursor:Help"><BR> <BR> </FORM></TD>
</TR>
</TABLE>
<P><SCRIPT LANGUAGE="JavaScript"><!--
hexa= new Array()
hexa[1]= "0"
hexa[2]= "1"
hexa[3]= "2"
hexa[4]= "3"
hexa[5]= "4"
hexa[6]= "5"
hexa[7]= "6"
hexa[8]= "7"
hexa[9]= "8"
hexa[10]= "9"
hexa[11]= "A"
hexa[12]= "B"
hexa[13]= "C"
hexa[14]= "D"
hexa[15]= "E"
hexa[16]= "F"
document.formac.redcode.value=00
document.formac.greencode.value=00
document.formac.bluecode.value=00
r=0
g=0
b=0
hexr="00"
hexg="00"
hexb="00"
inc=document.form.menu.options[document.form.menu.selectedIndex].value
function redmas(){
inc=document.form.menu.options[document.form.menu.selectedIndex].value
r+=inc/1
document.formac.redcode.value=r
setTimeout(´cambior()´)
}
function redmenos(){
inc=document.form.menu.options[document.form.menu.selectedIndex].value
r-=inc/1
document.formac.redcode.value=r
setTimeout(´cambior()´)
}
function greenmas(){
inc=document.form.menu.options[document.form.menu.selectedIndex].value
g+=inc/1
document.formac.greencode.value=g
setTimeout(´cambiog()´)
}
function greenmenos(){
inc=document.form.menu.options[document.form.menu.selectedIndex].value
g-=inc/1
document.formac.greencode.value=g
setTimeout(´cambiog()´)
}
function bluemas(){
inc=document.form.menu.options[document.form.menu.selectedIndex].value
b+=inc/1
document.formac.bluecode.value=b
setTimeout(´cambiob()´)
}
function bluemenos(){
inc=document.form.menu.options[document.form.menu.selectedIndex].value
b-=inc/1
document.formac.bluecode.value=b
setTimeout(´cambiob()´)
}
function cambior(){
if (document.formac.redcode.value>255){
document.formac.redcode.value=255
document.hexad.hr.value="FF"
r=255
setTimeout(´resul()´)
alert(" El valor no debe de ser superior a los 255 en Decimal ni a FF en Hexadecimal")
}
if (document.formac.redcode.value<0){
document.formac.redcode.value=0
document.hexad.hr.value="00"
r=0
setTimeout(´resul()´)
alert(" El valor no debe de ser menor a 0 tanto en Decimal como en Hexadecimal")
}
else{
redcode = document.formac.redcode.value
o = redcode%16
div = redcode/16
er = Math.floor(div)
hexr = hexa[er+1] + hexa[o+1]
document.hexad.hr.value=hexr
r=document.formac.redcode.value/1
setTimeout(´resul()´)
}
}
function cambiog(){
if (document.formac.greencode.value>255){
document.formac.greencode.value=255
g=255
document.hexad.hg.value="FF"
setTimeout(´resul()´)
alert(" El valor no debe de ser superior a los 255 en Decimal ni a FF en Hexadecimal")
}
if (document.formac.greencode.value<0){
document.formac.greencode.value=0
document.hexad.hg.value="00"
g=0
setTimeout(´resul()´)
alert("El valor no debe de ser menor a 0 tanto en Decimal como en Hexadecimal")
}
else{
greencode = document.formac.greencode.value
go = greencode%16
gdiv = greencode/16
ger = Math.floor(gdiv)
hexg = hexa[ger+1] + hexa[go+1]
document.hexad.hg.value=hexg
g=document.formac.greencode.value/1
setTimeout(´resul()´)
}
}
function cambiob(){
if (document.formac.bluecode.value>255){
document.formac.bluecode.value=255
b=255
document.hexad.hb.value="FF"
setTimeout(´resul()´)
alert("El valor no debe de ser superior a los 255 en Decimal ni a FF en Hexadecimal")
}
if (document.formac.bluecode.value<0){
document.formac.bluecode.value=0
b=0
document.hexad.hb.value="00"
setTimeout(´resul()´)
alert("El valor no debe de ser menor a 0 tanto en Decimal como en Hexadecimal")
}
else{
bluecode = document.formac.bluecode.value
bo = bluecode%16
bdiv = bluecode/16
ber = Math.floor(bdiv)
hexb = hexa[ber+1] + hexa[bo+1]
document.hexad.hb.value=hexb
b=document.formac.bluecode.value/1
setTimeout(´resul()´)
}
}
function resul(){
document.forma.codigo.value="#"+""+hexr+""+hexg+""+hexb
forma.bot.style.background=""+document.forma.codigo.value+""
}
function directo(){
forma.bot.style.background=""+document.forma.dir.value+""
}
function ayuda(){
alert(" "+
" Cómo usar el Fabricador de códigos de Colores (FCC) "+
" Con los botones de + y de - podrás aumentar o disminuir el valor de cada canal de color,"+
" ya que en internet se utiliza para los colores el código RGB (red, green, blue)."+
" "+
" Si deseas que el aumento sea de 1 en 1, de 2 en 2, etc modifica el menu de opciones llamado"+
" valor del incremento. Con esto tendrás mas rapidez y precisión."+
" "+
" El numero 1 esta marcado con > por que cambia el numero de la izquierda en el valor hexadecimal"+
" y el numero 16 tambien se encuentra marcado porque cambia el digito de la derecha en el valor "+
" hexadecimal"+
" "+
" Podrás cambiar directamente el valor de cada canal modificando el valor del cuadro que aparece"+
" a la derecha de cada color. El valor no debe de ser superior a los 255, ya que ess el valor "+
" maximo en numeración decimal de cada canal o FF en hexadecimal, sin embargo el valor del "+
" cuadro de la derecha esta en decimal. "+
" "+
" Si conoces como se escribe el color y quieres ver como se ve, simplemente escribe el código en"+
" el cuadro de Método directo."+
" "+
" El color se vera en el boton que aparece a la derecha."+
" "+
" "+
" Gracias."
)
}
// --></SCRIPT></P> </BODY>
</HTML>
|
|
|
|
|
|
|
|
