js实现了一个具有不同颜色值的颜色选择器的实例。
复制代码代码如下所示:
js颜色选择器,可以得到不同的颜色值
VaR IW = 70 '; / /共6种颜色,每种颜色的宽度信息战。IW * 6是色带的宽度。
VaR IH = f'400 '; / / IH是颜色带的高度。
计算HSV颜色代码。
函数HSV(){
kkk1.value = X:+事件。offsetx + Y:+ event.offsety;
h,s,V;
VaR py = event.offsety;
如果(= = 0){ = s=0;v=100;}
别的{
如果(PY = = ih-1)H = = V = 0;
别的{
math.floor H =(360×事件。offsetx /(IW×6));
math.round(S = 50×(IH PY)/(IH / 2));
V = math.round(100-50 * PY / IH);
}
}
kkk2。值= 'hsv(+ +,+ +%,V%);
HSVtoRGB(H,S / 100 V / 100);
}
计算RGB颜色代码。
功能hsvtorgb(H,S,V){
变量i,f,P1,P2,P3;
var = g = b = 0;
如果(s<0)s=0;
如果(s = 1)s=1;
如果(v<0)v=0;
如果(v=1)v=1;
h=360;
如果(h<0)h=360;
h=60;
我= math.floor(H);
F = H-I;
P1 = V(1-S);
P2 = V(1-S * F);
P3 = V(1-S *(1-f));
如果(i = 0){ = v;G = P3;b = P1;}
否则,如果(i = 1){ = P2;G = v;;
否则,如果(i = 2)r = P1;G = v;;
否则如果(i = 3)r = P1;G = P2;b = v;}
否则如果(i = 4){ = P3;G = P1;b = v;}
否则,如果(i = 5){ = v;;
kkk3。值= '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颜色代码。
函数的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。值= 'html # + R+G+B;
}
函数在window.onload(){
VaR的彩虹=新的数组(255,0,0,255255,0,0255,0,0255255, 00255,2550255,255,0,0);
对于(var i = 0;i < 6;i + +){
var =彩虹{ { 3 };
var =彩虹{ { 3 + 1 };
var =彩虹{ { 3 + 2 };
var =彩虹{(i + 1)* 3 };
var = { {(i + 1)* 3 + 1 };
var { = {(i + 1)* 3 + 2 };
= rainbowdiv .innerHTML
}
= rainbowdiv .innerHTML
}
希望本文能对大家的javascript程序设计有所帮助。