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

<script><br /> var iW = '70';//共有6种颜色，每种颜色的宽为iW。iW*6为色带的宽。<br /> var iH = '400';//iH为色带的高。<br /> //计算HSV颜色代码。<br /> function HSV(){<br /> kkk1.value = 'X:'+event.offsetX+' Y:'+event.offsetY;<br /> var H,S,V;<br /> var pY = event.offsetY;<br /> if(pY == 0){H = S = 0; V = 100;}<br /> else{<br /> if(pY == iH-1) H = S = V = 0;<br /> else{<br /> H = Math.floor(360*event.offsetX/(iW*6));<br /> S = Math.round(50*(iH-pY)/(iH/2));<br /> V = Math.round(100-50*pY/iH);<br /> }<br /> }<br /> kkk2.value='HSV('+H+','+S+'%,'+V+'%)';<br /> HSVtoRGB(H,S/100,V/100);<br /> } <p>//计算RGB颜色代码。<br /> function HSVtoRGB(h,s,v){<br /> var i, f ,p1 ,p2 ,p3;<br /> var r = g = b = 0;<br /> if(s < 0) s=0;<br /> if(s > 1) s=1;<br /> if(v < 0) v=0;<br /> if(v > 1) v=1;<br /> h %= 360;<br /> if(h < 0) h+=360;<br /> h /= 60;<br /> i = Math.floor(h);<br /> f = h-i;<br /> p1 = v*(1-s);<br /> p2 = v*(1-s*f);<br /> p3 = v*(1-s*(1-f));<br /> if(i == 0){r=v; g=p3; b=p1;}<br /> else if(i == 1){r=p2; g=v; b=p1;}<br /> else if(i == 2){r=p1; g=v; b=p3;}<br /> else if(i == 3){r=p1; g=p2; b=v;}<br /> else if(i == 4){r=p3; g=p1; b=v;}<br /> else if(i == 5){r=v; g=p1; b=p2;}<br /> kkk3.value='RGB('+Math.round(r*255)+','+Math.round(g*255)+','+Math.round(b*255)+')';<br /> RGBtoHTML(Math.round(r*255),Math.round(g*255),Math.round(b*255))<br /> } <p>//计算HTML颜色代码。<br /> function RGBtoHTML(r,g,b){<br /> r=(r>=16)&#63;r.toString(16):('0'+r.toString(16))<br /> g=(g>=16)&#63;g.toString(16):('0'+g.toString(16))<br /> b=(b>=16)&#63;b.toString(16):('0'+b.toString(16))<br /> kkk4.value='HTML #'+r+g+b;<br /> } <p>function window.onload(){<br /> 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);<br /> for(var i=0;i<6;i++){<br /> var R1 = RainBow[i*3];<br /> var G1 = RainBow[i*3+1];<br /> var B1 = RainBow[i*3+2];<br /> var R2 = RainBow[(i+1)*3];<br /> var G2 = RainBow[(i+1)*3+1];<br /> var B2 = RainBow[(i+1)*3+2];<br /> RainBowDiv.innerHTML += "<div style='position:absolute;left:"+i*iW+";top:0;width:"+iW+";height:"+iH+";background:rgb("+R1+","+G1+","+B1+");'></script>