Este artículo describe la implementación JS de selectores de color que pueden obtener diferentes valores de color. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <html>
<Evista>
<title> JS Color Selector, puede obtener diferentes valores de color </title>
</ablo>
<Body>
<input id = kkk1 style = posición: absoluto; izquierda: 0; arriba: 0>
<input id = kkk2 style = posición: absoluto; izquierda: 200; arriba: 0>
<input id = kkk3 style = posición: absoluto; izquierda: 400; arriba: 0>
<input id = kkk4 style = posición: absoluto; izquierda: 600; arriba: 0>
<div id = RainbowDiv style = 'Posición: Absoluto; Izquierda: 200; arriba: 30;'> </div>
<script>
var iw = '70'; // Hay 6 colores en total, y el ancho de cada color es IW. IW*6 es el ancho de la cinta.
var ih = '400'; // ih es la altura de la cinta.
// Calcule el código de color HSV.
función 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;}
demás{
if (py == ih-1) h = s = v = 0;
demás{
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);
}
// Calcule el código de color RGB.
función 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 = hola;
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))
}
// Calcule el código de color HTML.
función 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;
}
función window.onload () {
Var Rainbow = nueva matriz (255,0,0, 255,255,0, 0,255,0, 0,255,255, 0,0,255, 255,0,0,0);
para (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 = 'posición: absoluto; izquierda:"+i*iw+"; top: 0; ancho:"+iw+"; altura:"+ih+"; fondo: rgb ("+r1+","+g1+","+b1+");" </div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> estilo = 'posición: absoluto; izquierda: "+i*iw+"; arriba: 0; ancho: "+iw+"; altura: "+ih+"; fondo: rgb ("+r2+", "+g2+", "+b2+"); filtro: alfa (opacidad = 0, finalopacity = 100, style = 1); "</iv>" "
}
Rainbowdiv.innerhtml += "<Div estilo = posición: absoluto; izquierda: 0; arriba: 0; ancho: "+6*iw+"; altura: "+ih+"; fondo: rgb (128,128,128); filtro: alfa (opacidad = 0, metaPacity = 100, style = 1, starty = 0, fingey = 100, startx = 0, finketx = 0)> </div> <div> estilo = 'posición: absoluto; izquierda: 0; arriba: 0; ancho: "+(6*iw+1)+"; altura: "+ih+";' onmouseMove = hsv ()> </div> "
}
</script>
</body>
</html>
Para obtener más operaciones de color JS, consulte las herramientas de color de este sitio:
Generador de codificación de color RGB
Herramienta de coincidencia de color web en línea
Table de comparación de consultas de color RGB Table_color table_colour colección de nombres en inglés
Espero que este artículo sea útil para la programación de JavaScript de todos.