Este artigo descreve a implementação do JS de seletores de cores que podem obter diferentes valores de cores. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <html>
<head>
<Title> seletor de cores JS, você pode obter diferentes valores de cores </ititure>
</head>
<Body>
<ID de entrada = KKK1 Style = Posição: Absolute; esquerda: 0; topo: 0>
<ID de entrada = Kkk2 Style = Posição: Absolute; esquerda: 200; topo: 0>
<ID de entrada = Kkk3 Style = Posição: Absoluto; esquerda: 400; topo: 0>
<ID de entrada = Kkk4 estilo = posição: absoluto; esquerda: 600; topo: 0>
<div id = Rainbowdiv Style = 'Posição: Absoluto; esquerda: 200; topo: 30;'> </div>
<Cript>
var iw = '70'; // Existem 6 cores no total, e a largura de cada cor é IW. IW*6 é a largura da fita.
var ih = '400'; // ih é a altura da fita.
// Calcule o código de cores HSV.
função 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;}
outro{
if (py == ih-1) h = s = v = 0;
outro{
H = math.floor (360*event.offsetx/(iw*6));
S = Math.Round (50*(ih-py)/(ih/2));
V = Math.Round (100-50*py/ih);
}
}
kkk222.value = 'hsv ('+h+','+s+'%,'+v+'%)';
HsvtorGB (H, S/100, v/100);
}
// Calcule o código de cores RGB.
função 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 = oi;
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;}
caso contrário, if (i == 5) {r = v; g = p1; b = p2;}
kkk33.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 o código de cores HTML.
função 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;
}
função window.onload () {
Var Rainbow = nova matriz (255,0,0, 255,255,0, 0,255,0, 0,255,255, 0,0,255, 255,0,0);
for (var i = 0; i <6; i ++) {
var r1 = arco -íris [i*3];
var g1 = arco -íris [i*3+1];
var b1 = arco -íris [i*3+2];
var r2 = arco -íris [(i+1)*3];
var g2 = arco -íris [(i+1)*3+1];
var b2 = arco -íris [(i+1)*3+2];
Rainbowdiv.innerhtml+= "<div Style = 'Posição: Absoluto; esquerda:"+i*iw+"; topo: 0; largura:"+iw+"; altura:"+ih+"; fundo: rgb ("+r1+","+g1+","+b1+");'> </div estilo = 'posição: absoluto; esquerda: "+i*iw+"; topo: 0; largura: "+iw+"; altura: "+ih+"; fundo: rgb ("+r2+", "+g2+", "+b2+"); filtro: alpha (opacidade 0, 0 finalOpacity = 100, estilo = 1);
}
Rainbowdiv.innerhtml+= "<Div Style = Posição: Absoluto; Esquerda: 0; topo: 0; largura:"+6*iw+"; altura:"+ih+"; background: rgb (128,128,128); filtro: alpha (opacidade = 0, finalOpacity = 100, estilo = 1,, 1,, estilo = 'posição: absoluto; esquerda: 0; topo: 0; largura: "+(6*iw+1)+"; altura: "+ih+";' onmouseMove = hsv ()> </div> "
}
</script>
</body>
</html>
Para mais operações de cores JS, consulte as ferramentas de cores deste site:
Gerador de codificação de cores rgb
Ferramenta de correspondência de cor on -line na web
RGB COLORE COMERY COMPARISON TABLE_COLOR CÓDIGO TABLE_COLOUR ENGONER
Espero que este artigo seja útil para a programação JavaScript de todos.