javascript实现了颜色选择并现出对应的颜色值
效果演示 javascript颜色器
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;}
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;
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 +=
}
ihtml +=
document.body.innerhtml+=ihtml;
setcolor();
}