本文实例讲述了 js 实现可得到不同颜色值的颜色选择器。分享给大家供大家参考。具体实现方法如下:
- <html>
- <head>
- <title>
- js颜色选择器,可得到不同的颜色值
- </title>
- </head>
- <body>
- <input id=kkk1 style=position:absolute;left:0;top:0>
- <input id=kkk2 style=position:absolute;left:200;top:0>
- <input id=kkk3 style=position:absolute;left:400;top:0>
- <input id=kkk4 style=position:absolute;left:600;top:0>
- <div id=RainBowDiv style='position:absolute;left:200;top:30;'>
- </div>
- <script>
- 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 += "
更多 js 颜色操作可参考本站颜色工具:
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0713/272591.html