The example of this article tells the JS implementation can get different color values of color selector. Share to everyone for your reference. The implementation methods are as follows:
<title>js Color selector to get different color values </title>
<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 '///There are 6 colors, the width of each color is IW. Iw*6 is the width of the ribbon.
var IH = ' n ';//ih is the height of the ribbon.
Computes the HSV color code.
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);
}
Calculates the RGB color code.
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))
}
Computes the HTML color code.
function rgbtohtml (r,g,b) {
R= (r>=16) r.tostring:(' 0 ' +r.tostring (16))
G= (g>=16) g.tostring:(' 0 ' +g.tostring (16))
b= (b>=16) b.tostring:(' 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 style= ' position:absolute;left: +i*iw+"; Top:0;width: "+iw+"; Height: "+iH+"; Background:rgb ("+r1+", "+g1+", "+b1+"); ' ></div><div style= ' position:absolute;left: "+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 style= ' position:absolute;left:0;top:0;width: "+ (6*iw+1) +"; Height: "+ih+"; ' ONMOUSEMOVE=HSV () ></div> "
}
</script>
</body>
I hope this article will help you with your JavaScript programming.