信鸽网

JavaScript 十六进制RGB色码转换器

  作者：bea

<html> <head> <title>十六进制RGB色码转换器 风越ASP代码生成器</title> </head> <!--第一步：先将下列代码复制到<head></head>之间：--> <script type="text/javascript"><!-- var R=0 var G=0 var B=0 function toHex(N){ N


<html>
<head>
<title>十六进制RGB色码转换器 风越ASP代码生成器</title>
</head>
<!--第一步：先将下列代码复制到<head></head>之间：-->
<script type="text/javascript"><!--
var R=0
var G=0
var B=0
function toHex(N){
N=Math.max(0,N)
N=Math.min(255,N)
return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16)
}
function set(){
R=R_slider.style.pixelLeft
G=G_slider.style.pixelLeft
B=B_slider.style.pixelLeft
R=Math.max(0,R)
R=Math.min(255,R)
G=Math.max(0,G)
G=Math.min(255,G)
B=Math.max(0,B)
B=Math.min(255,B)
var color="#"+toHex(R)+toHex(G)+toHex(B)
hex_color.value=color
cur.style.backgroundColor=color
rUp.style.backgroundColor="#"+toHex(R)+"00"+"00"
gUp.style.backgroundColor="#"+"00"+toHex(G)+"00"
bUp.style.backgroundColor="#"+"00"+"00"+toHex(B)
}
function setColor(v){
var x=event.clientX-5
if(x>255) x=255
if(x<0) x=0
eval(v+"_slider").style.pixelLeft=x
eval(v+"_value").innerHTML=x
set()
}
// --></script>
<script type="text/javascript"><!--
var off,curD,dragging
function start_drag(){
off=event.clientX-curD.style.pixelLeft
}
function drag(){
if(dragging){
x=event.clientX-off
if(curD.style.pixelLeft>=0 && curD.style.pixelLeft<=255){
curD.style.pixelLeft=x
eval(curD.value+"_value").innerHTML=curD.style.pixelLeft
set()
}
if(curD.style.pixelLeft>255){
curD.style.pixelLeft=255;
//alert("Sorry, but you can not have RGB values that are over 255!")
eval(curD.value+"_value").innerHTML=curD.style.pixelLeft
}
if(curD.style.pixelLeft<0){
curD.style.pixelLeft=0
//alert("Sorry, but you can not have RGB values that are under 255!")
eval(curD.value+"_value").innerHTML=curD.style.pixelLeft
}
}
return false
}
document.onmousemove=drag
document.onmouseup=new Function("dragging=false;")
// --></script>
<style><!--
.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><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></body>之间：-->
<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>


<span id="G_value" class="slider" align="left" onclick="setColor('G')">G</span>
<span id="G_slider" class="slider_bar" value="G" onmouseDown="curD=this; dragging=true; start_drag(); this.style.background='white'" onMouseUp="this.style.background='menu'"></span>
<span id="gUp" class="small_box"></span>


<span id="B_value" class="slider" align="left" onclick="setColor('B')">B</span>
<span id="B_slider" class="slider_bar" value="B" onmouseDown="curD=this; dragging=true; start_drag(); this.style.background='white'" onMouseUp="this.style.background='menu'"></span>
<span id="bUp" class="small_box"></span>


<input size=7 maxlength="7" name="hex_color">
<span class="button" onClick="setFromHex()" onmouseDown="this.style.borderStyle='inset'" onmouseUp="this.style.borderStyle='outset'">转换</span>

<script type="text/javascript"><!--
function setFromHex(){
var h=hex_color.value
if(h.charAt(0)=="#"){h=h.substring(1,h.length)}
h=h.split("")
var no="ghijklmnopqrstuvwxyz"
for(var i=0;i<no.length;i++){
if(no.indexOf(h[i])!=-1){h[i]="F"}
}
h=h.join("")
R=toDec(h.substring(0,2))
G=toDec(h.substring(2,4))
B=toDec(h.substring(4,6))
R_slider.style.pixelLeft=R
G_slider.style.pixelLeft=G
B_slider.style.pixelLeft=B
R_value.innerHTML=R
G_value.innerHTML=G
B_value.innerHTML=B
set()
}
function toDec(h){
return parseInt(h,16)
}
// --></script>
<body>
</body>
</html>




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



有用  |  无用

猜你喜欢

您可能感兴趣的文章: