js实现可得到不同颜色值的颜色选择器实例
本文实例讲述了js实现可得到不同颜色值的颜色选择器。分享给大家供大家参考。具体实现方法如下：
<html>
<head>
<title>js颜色选择器，可得到不同的颜色值</title>
</head>
<body>
<inputid=kkk1style=position:absolute;left:0;top:0>
<inputid=kkk2style=position:absolute;left:200;top:0>
<inputid=kkk3style=position:absolute;left:400;top:0>
<inputid=kkk4style=position:absolute;left:600;top:0>
<divid=RainBowDivstyle='position:absolute;left:200;top:30;'></div>
<script>
variW='70';//共有6种颜色，每种颜色的宽为iW。iW*6为色带的宽。
variH='400';//iH为色带的高。
//计算HSV颜色代码。
functionHSV(){
kkk1.value='X:'+event.offsetX+' Y:'+event.offsetY;
varH,S,V;
varpY=event.offsetY;
if(pY==0){H=S=0;V=100;}
else{
if(pY==iH-1)H=S=V=0;
else{
H=Math.floor(360*event.offsetX/(iW*6));
S=Math.round(50*(iH-pY)/(iH/2));
V=Math.round(100-50*pY/iH);
}
}
kkk2.value='HSV('+H+','+S+'%,'+V+'%)';
HSVtoRGB(H,S/100,V/100);
}
//计算RGB颜色代码。 functionHSVtoRGB(h,s,v){ vari,f,p1,p2,p3; varr=g=b=0; if(s<0)s=0; if(s>1)s=1; if(v<0)v=0; if(v>1)v=1; h%=360; if(h<0)h+=360; h/=60; i=Math.floor(h); f=h-i; p1=v*(1-s); p2=v*(1-s*f); p3=v*(1-s*(1-f)); if(i==0){r=v;g=p3;b=p1;} elseif(i==1){r=p2;g=v;b=p1;} elseif(i==2){r=p1;g=v;b=p3;} elseif(i==3){r=p1;g=p2;b=v;} elseif(i==4){r=p3;g=p1;b=v;} elseif(i==5){r=v;g=p1;b=p2;} kkk3.value='RGB('+Math.round(r*255)+','+Math.round(g*255)+','+Math.round(b*255)+')'; RGBtoHTML(Math.round(r*255),Math.round(g*255),Math.round(b*255)) }
//计算HTML颜色代码。 functionRGBtoHTML(r,g,b){ r=(r>=16)?r.toString(16):('0'+r.toString(16)) g=(g>=16)?g.toString(16):('0'+g.toString(16)) b=(b>=16)?b.toString(16):('0'+b.toString(16)) kkk4.value='HTML#'+r+g+b; }
functionwindow.onload(){ varRainBow=newArray(255,0,0, 255,255,0, 0,255,0, 0,255,255, 0,0,255, 255,0,255, 255,0,0); for(vari=0;i<6;i++){ varR1=RainBow[i*3]; varG1=RainBow[i*3+1]; varB1=RainBow[i*3+2]; varR2=RainBow[(i+1)*3]; varG2=RainBow[(i+1)*3+1]; varB2=RainBow[(i+1)*3+2]; RainBowDiv.innerHTML+="<divstyle='position:absolute;left:"+i*iW+";top:0;width:"+iW+";height:"+iH+";background:rgb("+R1+","+G1+","+B1+");'></div><divstyle='position:absolute;left:"+i*iW+";top:0;width:"+iW+";height:"+iH+";background:rgb("+R2+","+G2+","+B2+");filter:alpha(opacity=0,finishopacity=100,Style=1);'></div>" } RainBowDiv.innerHTML+="<divstyle=position:absolute;left:0;top:0;width:"+6*iW+";height:"+iH+";background:rgb(128,128,128);filter:alpha(opacity=0,finishOpacity=100,style=1,starty=0,finishy=100,startx=0,finishx=0)></div><divstyle='position:absolute;left:0;top:0;width:"+(6*iW+1)+";height:"+iH+";'onmousemove=HSV()></div>" } </script> </body> </html>