js实现可得到不同颜色值的颜色选择器实例

摘要：本文实例讲述了js实现可得到不同颜色值的颜色选择器。分享给大家供大家参考。具体实现方法如下：复制代码代码如下:js颜色选择器，可得到不同的颜...

本文实例讲述了js实现可得到不同颜色值的颜色选择器。分享给大家供大家参考。具体实现方法如下：

复制代码代码如下:<html>

<head>

<title>js颜色选择器，可得到不同的颜色值</title>

</head>

<body>

var iW = '70';//共有6种颜色，每种颜色的宽为iW。iW*6为色带的宽。

var iH = '400';//iH为色带的高。

//计算HSV颜色代码。

function HSV(){

kkk1.value = 'X:'+event.offsetX+' Y:'+event.offsetY;

var H,S,V;

var pY = 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颜色代码。

function HSVtoRGB(h,s,v){

var i, f ,p1 ,p2 ,p3;

var r = 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;}

else if(i == 1){r=p2; g=v; b=p1;}

else if(i == 2){r=p1; g=v; b=p3;}

else if(i == 3){r=p1; g=p2; b=v;}

else if(i == 4){r=p3; g=p1; b=v;}

else if(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颜色代码。

function RGBtoHTML(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;

}

function window.onload(){

var RainBow = new Array(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];

RainBowDiv.innerHTML += "<div+i*iW+";top:0;width:"+iW+";height:"+iH+";background:rgb("+R1+","+G1+","+B1+");'></div><div+i*iW+";top:0;width:"+iW+";height:"+iH+";background:rgb("+R2+","+G2+","+B2+");filter:alpha(opacity=0,finishopacity=100,Style=1);'></div>"

}

RainBowDiv.innerHTML += "<div style=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><div+(6*iW+1)+";height:"+iH+";' onmousemove=HSV()></div>"

}

</script>

</body>

</html>

更多js颜色操作可参考本站颜色工具：

RGB颜色编码生成器

在线网页配色工具

RGB颜色查询对照表_颜色代码表_颜色的英文名称大全

希望本文所述对大家的javascript程序设计有所帮助。