js實作可得到不同顏色值的顏色選擇器實例_javascript技巧

本文實例講述了js實作可得到不同顏色值的顏色選擇器。分享給大家供大家參考。具體實作方法如下：

複製程式碼 程式碼如下:

<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)?r.toString(16):('0' r.toString(16))<br /> g=(g>=16)?g.toString(16):('0' g.toString(16))<br /> b=(b>=16)?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,  25<,0,0); 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>

"
 }
RainBowDiv.innerHTML = "

"
}



更多js顏色操作可參考本站顏色工具：

RGB顏色編碼產生器

線上網頁配色工具

RGB顏色查詢對照表_顏色代碼表_顏色的英文名稱大全

希望本文所述對大家的javascript程式設計有所幫助。