Cet article décrit l'implémentation JS de sélecteurs de couleurs qui peuvent obtenir différentes valeurs de couleurs. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <html>
<adal>
<Title> JS Color Sélecteur, vous pouvez obtenir différentes valeurs de couleur </TITME>
</ head>
<body>
<ID d'entrée = KKK1 Style = Position: Absolut; gauche: 0; Top: 0>
<ID d'entrée = KKK2 Style = Position: Absolut; gauche: 200; top: 0>
<ID d'entrée = KKK3 Style = Position: Absolut; gauche: 400; Top: 0>
<ID d'entrée = KKK4 Style = Position: Absolut; gauche: 600; top: 0>
<Div id = RainbowDiv Style = 'Position: Absolute; Left: 200; top: 30;'> </div>
<cript>
var iw = '70'; // il y a 6 couleurs au total, et la largeur de chaque couleur est iw. Iw * 6 est la largeur du ruban.
var ih = '400'; // ih est la hauteur du ruban.
// Calculez le code couleur HSV.
fonction 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;}
autre{
if (py == ih-1) h = s = v = 0;
autre{
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);
}
// Calculez le code couleur RVB.
fonction 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 = salut;
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)))
}
// Calculer le code couleur HTML.
fonction 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 = Nouveau tableau (255,0,0, 255,255,0, 0,255,0, 0,255 255, 0,0,255, 255,0,0,0);
pour (var i = 0; i <6; i ++) {
var r1 = arc-en-ciel [i * 3];
var g1 = arc-en-ciel [i * 3 + 1];
var b1 = arc-en-ciel [i * 3 + 2];
var r2 = arc-en-ciel [(i + 1) * 3];
var g2 = arc-en-ciel [(i + 1) * 3 + 1];
var b2 = arc-en-ciel [(i + 1) * 3 + 2];
Rainbowdiv.innerhtml + = "<div style = 'position: absolue; gauche:" + i * iw + "; top: 0; largeur:" + iw + "; hauteur:" + ih + "; fond: rgb (" + r1 + "," + g1 + "," + b1 + ");'> </v> <div>" style = 'position: Absolute; Left: "+ i * iw +"; top: 0; largeur: "+ iw +"; hauteur: "+ ih +"; fond: rgb ("+ r2 +", "+ g2 +", "+ b2 +"); filter: alpha (opacity = 0, finalOpacity = 100, style = 1);'> </v> "
}
Rainbowdiv.innerhtml + = "<div Style = position: Absolute; gauche: 0; top: 0; largeur: "+ 6 * iw +"; hauteur: "+ ih +"; arrière-plan: RGB (128,128,128); filtre: alpha (opacity = 0, finaloPacity = 100, style = 1, starty = 0, finaly = 100, startX = 0, finialx = 0)> </v> <divy = 0, fini style = 'position: absolu; gauche: 0; en haut: 0; largeur: "+ (6 * iw + 1) +"; hauteur: "+ ih +";' onMouseMove = hsv ()> </div> "
}
</cript>
</docy>
</html>
Pour plus d'opérations de couleur JS, veuillez vous référer aux outils de couleur de ce site:
Générateur de codage de couleur RVB
Outil de correspondance de couleur Web en ligne
Table de comparaison de la requête de couleur RVB_Color Table_colour Collection de noms anglais
J'espère que cet article sera utile à la programmation JavaScript de tous.