javascript实现了颜色选择并现出对应的颜色值
效果演示 javascript颜色器
<html>
<head>
<title>javascript颜色选择</title>
<meta http-equiv=content-type content=text/html; charset=gb2312>
<style type=text/css>
body{background-color: buttonface; }
input{font-size:9pt;font-family: verdana,tahoma,arial,sans-serif;}
button{height:24px;font-size:10pt;font-family: verdana,tahoma,arial,sans-serif;}
</style>
</head>
<body onselectstart=return false; style=margin: 0px;padding: 0px;>
<script language=javascript>
document.title=颜色选择+ document.title;
var iw = 30;//共有6种颜色，每种颜色的宽为iw。iw*6为色带的宽。
var ih = '152';//ih为色带的高。
var it =20;
var il = 0;
//var it = (document.body.offsetheight-ih)/2;
var h,s,v;
var sr,sg,sb;
var curcolor=#000000;
</script>
<table cellspacing=0 cellpadding=0>
<tr>
<td>
<input type=text disabled=true size=9 id=showcolor style=background-color:#000000;disabled:true;><input type=text disabled=true size=15 id=selcolor value=#000000>
</td>
</tr>
</table>
<script language=javascript>
function setcolor(){
selcolor.value=curcolor.touppercase();
showcolor.style.background=curcolor;
}
function hsv(){
var px = event.offsetx;
var py = event.offsety;
var halfh = parseint(ih/2);
h = parseint(px*360/(iw*6));
if(event.offsety < halfh){
s = py/halfh;
v = 1;
}else{
s = 1;
v = (ih-py)/halfh;
}
hsvtorgb();
rgb=rgb2html();
//hsv.value = 'h:'+h+' s:'+parseint(s*100)+'% v:'+parseint(v*100)+'%';
//rgb.value = 'r:'+sr+' g:'+sg+' b:'+sb;
selcolor.value=#+rgb.touppercase();
showcolor.style.background= '#'+rgb;
}
function hsvtorgb(){
var r,g,b;
var k = (h%60)/60;
var c1 = v*(1-s);
var c2 = v*(1-s*k);
var c3 = v*(1-s*(1-k));
switch(parseint(h/60)){
case 0 : r=v,g=c3;b=c1; break;
case 1 : r=c2,g=v;b=c1; break;
case 2 : r=c1,g=v;b=c3; break;
case 3 : r=c1,g=c2;b=v; break;
case 4 : r=c3,g=c1;b=v; break;
case 5 : r=v,g=c1;b=c2; break;
}
sr = parseint(r*255);
sg = parseint(g*255);
sb = parseint(b*255);
}
function rgb2html(){
var r=(sr>=16)?sr.tostring(16):('0'+sr.tostring(16));
var g=(sg>=16)?sg.tostring(16):('0'+sg.tostring(16));
var b=(sb>=16)?sb.tostring(16):('0'+sb.tostring(16));
return r+g+b;
}
function finsh(){
window.returnvalue = selcolor.value;
window.close();
}
function window.onload(){
var ihtml = '';
var rainbow = [255,0,0, 255,255,0, 0,255,0, 0,255,255, 0,0,255, 255,0,255, 255,0,0];
for(var i=0;i<6;i++){
var r1 = rainbow[i*3];
var g1 = rainbow[i*3+1];
var b1 = rainbow[i*3+2];
var r2 = rainbow[(i+1)*3];
var g2 = rainbow[(i+1)*3+1];
var b2 = rainbow[(i+1)*3+2];
ihtml += <span style='position:absolute;left:+(i*iw+il)+;top:+it+;width:+iw+;height:+ih+;background:rgb(+r1+,+g1+,+b1+);'></span><span style='position:absolute;left:+(i*iw+il)+;top:+it+;width:+iw+;height:+ih+;background:rgb(+r2+,+g2+,+b2+);filter:alpha(opacity=0,finishopacity=100,style=1);'></span>
}
ihtml += <span style=position:absolute;left:+il+;top:+it+;width:+iw*6+;height:+ih/2+;background:rgb(255,255,255);filter:alpha(opacity=100,finishopacity=0,style=1,starty=0,finishy=100,startx=0,finishx=0)></span><span style=position:absolute;left:+il+;top:+(it+ih/2)+;width:+iw*6+;height:+ih/2+;background:rgb(0,0,0);filter:alpha(opacity=0,finishopacity=100,style=1,starty=0,finishy=100,startx=0,finishx=0)></span><span style='cursor:crosshair;position:absolute;left:+il+;top:+it+;width:+iw*6+;height:+ih+;' onmousemove=hsv() ondblclick=finsh() onclick='curcolor=selcolor.value' onmouseout=setcolor()></span>
document.body.innerhtml+=ihtml;
setcolor();
}
</script>
</body>
</html>