Example of a color selector with different color values available in js implementation
This article mainly introduces how to use javascript to obtain color selector with different color values. The example analyzes the javascript color operation skills and provides some reference value. For more information, see
This example describes how to use a color selector to obtain different color values in JavaScript. Share it with you for your reference. The specific implementation method is as follows:
The Code is as follows:
<Html>
<Head>
<Title> js color selector to obtain different color values </title>
</Head>
<Body>
<Input id = kkk1 style = position: absolute; left: 0; top: 0>
<Input id = kkkk2 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 in total. The width of each color is iW. IW * 6 indicates the width of the ribbon.
Var iH = '000000'; // iH indicates the height of the ribbon.
// Calculate 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 +' % )';
HSV torgb (H, S/100, V/100 );
}
// Calculate the RGB color code.
Function HSV torgb (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 ))
}
// Calculate the HTML color code.
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, 255,255, 255,255, 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 (1, 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>
</Html>
I hope this article will help you design javascript programs.