Javascript implementation to obtain color selector with different color values _ javascript skills

This article mainly introduces how to use javascript to obtain color selectors with different color values. The example analyzes the javascript color operation skills and provides some reference value, for more information, see the example in this article. The following 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:

Js color selector to obtain different color values

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 + ="

"
}
RainBowDiv. innerHTML + ="

"
}
Script

For more js color operations, refer to the color tool on this site:

RGB color encoding generator

Online Webpage color matching tool

RGB color query table _ color code table _ English name of colors

I hope this article will help you design javascript programs.