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();
}
更多信息请查看IT技术专栏