JavaScript 十六进制RGB色码转换器

<html> 
<head> 
<title>十六进制RGB色码转换器 风越ASP代码生成器</title> 
</head> 
 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%3C!--%20%0D%0Avar%20R%3D0%20%0D%0Avar%20G%3D0%20%0D%0Avar%20B%3D0%20%0D%0Afunction%20toHex(N)%7B%20%0D%0A%20%20%20%20N%3DMath.max(0%2CN)%20%0D%0A%20%20%20%20N%3DMath.min(255%2CN)%20%0D%0A%20%20%20%20return%20%220123456789ABCDEF%22.charAt((N-N%2516)%2F16)%20%2B%20%220123456789ABCDEF%22.charAt(N%2516)%20%0D%0A%7D%20%0D%0Afunction%20set()%7B%20%0D%0A%20%20%20%20R%3DR_slider.style.pixelLeft%20%0D%0A%20%20%20%20G%3DG_slider.style.pixelLeft%20%0D%0A%20%20%20%20B%3DB_slider.style.pixelLeft%20%0D%0A%20%20%20%20R%3DMath.max(0%2CR)%20%0D%0A%20%20%20%20R%3DMath.min(255%2CR)%20%0D%0A%20%20%20%20G%3DMath.max(0%2CG)%20%0D%0A%20%20%20%20G%3DMath.min(255%2CG)%20%0D%0A%20%20%20%20B%3DMath.max(0%2CB)%20%0D%0A%20%20%20%20B%3DMath.min(255%2CB)%20%0D%0A%20%20%20%20var%20color%3D%22%23%22%2BtoHex(R)%2BtoHex(G)%2BtoHex(B)%20%0D%0A%20%20%20%20hex_color.value%3Dcolor%20%0D%0A%20%20%20%20cur.style.backgroundColor%3Dcolor%20%0D%0A%20%20%20%20rUp.style.backgroundColor%3D%22%23%22%2BtoHex(R)%2B%2200%22%2B%2200%22%20%0D%0A%20%20%20%20gUp.style.backgroundColor%3D%22%23%22%2B%2200%22%2BtoHex(G)%2B%2200%22%20%0D%0A%20%20%20%20bUp.style.backgroundColor%3D%22%23%22%2B%2200%22%2B%2200%22%2BtoHex(B)%20%0D%0A%7D%20%0D%0Afunction%20setColor(v)%7B%20%0D%0A%20%20%20%20var%20x%3Devent.clientX-5%20%0D%0A%20%20%20%20if(x%3E255)%20x%3D255%20%0D%0A%20%20%20%20if(x%3C0)%20x%3D0%20%0D%0A%20%20%20%20eval(v%2B%22_slider%22).style.pixelLeft%3Dx%20%0D%0A%20%20%20%20eval(v%2B%22_value%22).innerHTML%3Dx%20%0D%0A%20%20%20%20set()%20%0D%0A%7D%20%0D%0A%2F%2F%20--%3E%3C%2Fscript%3E"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%3C!--%20%0D%0Avar%20off%2CcurD%2Cdragging%20%0D%0Afunction%20start_drag()%7B%20%0D%0A%20%20%20%20off%3Devent.clientX-curD.style.pixelLeft%20%0D%0A%7D%20%0D%0Afunction%20drag()%7B%20%0D%0A%20%20%20%20if(dragging)%7B%20%0D%0A%20%20%20%20%20%20%20%20x%3Devent.clientX-off%20%0D%0A%20%20%20%20%20%20%20%20if(curD.style.pixelLeft%3E%3D0%20%26%26%20curD.style.pixelLeft%3C%3D255)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20curD.style.pixelLeft%3Dx%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20eval(curD.value%2B%22_value%22).innerHTML%3DcurD.style.pixelLeft%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20set()%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20if(curD.style.pixelLeft%3E255)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20curD.style.pixelLeft%3D255%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Falert(%22Sorry%2C%20but%20you%20can%20not%20have%20RGB%20values%20that%20are%20over%20255!%22)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20eval(curD.value%2B%22_value%22).innerHTML%3DcurD.style.pixelLeft%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20if(curD.style.pixelLeft%3C0)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20curD.style.pixelLeft%3D0%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2Falert(%22Sorry%2C%20but%20you%20can%20not%20have%20RGB%20values%20that%20are%20under%20255!%22)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20eval(curD.value%2B%22_value%22).innerHTML%3DcurD.style.pixelLeft%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20return%20false%20%0D%0A%7D%20%0D%0Adocument.onmousemove%3Ddrag%20%0D%0Adocument.onmouseup%3Dnew%20Function(%22dragging%3Dfalse%3B%22)%20%0D%0A%2F%2F%20--%3E%3C%2Fscript%3E"> 
<style></style><style bogus="1"> .slider_bar { 
    background : menu; 
font-size : 0; 
z-index : 0; 
top : auto; 
left : 0; 
     width : 9; 
     height : 20; 
     border : thin outset; 
position : absolute; 
cursor : NW-resize; 
} 
.slider { 
top : auto; 
left : 0; 
position : absolute; 
background: White; 
font-size : 10; 
height : 20; 
z-index : 0; 
width : 265; 
border : thin inset; 
text-align : center; 
} 
.small_box { 
top : auto; 
left : 270; 
position : absolute; 
font-size : 0; 
height : 20; 
z-index : 0; 
width : 20; 
border : thin inset; 
text-align : center; 
} 
.large_box { 
font-size : 0; 
height : 40; 
z-index : 0; 
width : 40; 
border : thin inset; 
text-align : center; 
} 
.button { 
     background : Menu; 
top : auto; 
left : auto; 
position : absolute; 
font-size : 12; 
height : 20; 
z-index : 0; 
width : 120; 
border : thin outset; 
text-align : center; 
     cursor : NW-resize; 
} 
.preset { 
top : auto; 
left : 270; 
position : absolute; 
font-size : 0; 
height : 15; 
z-index : 0; 
width : 15; 
border : thin inset; 
text-align : center; 
} 
.slider_box{ 
    top: auto; 
    left : auto; 
    position : absolute; 
}</style> 
 
<BODY onload="cur=test; set()"> 
<div><h1><font size="5"><font color="#FFFF00">十六进制</font><font color="#FF0000">R</font><font color="#008000">G</font><font color="#0000FF">B</font><font color="#FFFF00">色码转换器</font></font></h1></div> 
<span id="test" class="large_box"></span>
 
<span id="R_value" class="slider" align="left" onclick="setColor('R')">R</span> 
<span id="R_slider" class="slider_bar" value="R" onmouseDown="curD=this; dragging=true; start_drag(); this.style.background='white'" onMouseUp="this.style.background='menu'"></span> 
<span id="rUp" class="small_box"></span>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程