JS -Implementierung kann Farbauswahlinstanzen mit unterschiedlichen Farbwerten erhalten

Autor：Eve Cole Aktualisierungszeit：2025-05-25 17:32:01

Dieser Artikel beschreibt die JS -Implementierung von Farbauswahlern, die unterschiedliche Farbwerte erhalten können. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:

Kopieren Sie den Code wie folgt: <html>

<kopf>

<title> JS -Farbauswahl

</head>

<body>

var iw = '70'; // Es gibt insgesamt 6 Farben und die Breite jeder Farbe ist iw. IW*6 ist die Breite des Bandes.

var ih = '400'; // ih ist die Höhe des Bandes.

// Berechnen Sie den HSV -Farbcode.

Funktion 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;}

anders{

if (py == IH-1) H = s = v = 0;

anders{

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);

}

// Berechnen Sie den RGB -Farbcode.

Funktion 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 = hi;

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;}

sonst if (i == 2) {r = p1; g = v; B = p3;}

sonst if (i == 3) {r = p1; g = p2; b = v;}

sonst wenn (i == 4) {r = p3; g = p1; b = v;}

sonst wenn (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))

}

// HTML -Farbcode berechnen.

Funktion 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;

}

Funktionsfenster.onload () {

Var Rainbow = New Array (255,0,0, 255,255,0, 0,255,0, 0,255,255, 0,0,255, 255,0,0,0);

für (var i = 0; i <6; i ++) {

var r1 = regenbogen [i*3];

var g1 = regenbogen [i*3+1];

var b1 = regenbogen [i*3+2];

var R2 = Regenbogen [(i+1)*3];

var g2 = regenbogen [(i+1)*3+1];

var b2 = regenbogen [(i+1)*3+2];

Rainbowdiv.innnerHtml+= "<div style = 'Position: absolut; links:"+i*iw+"; oben: 0; Breite:"+iw+"; Höhe:"+ih+"; Hintergrund: rgb ("+r1+","+g1+","+b1+"); style = 'Position: absolut; links: "+i*iw+"; ober: 0; width: "+iw+"; Höhe: "+ih+"; Hintergrund: rgb ("+r2+", "+g2+", "+b2+"); Filter: Alpha (opacity = 0, Finishoppacity = 100, style = 1);

}

Rainbowdiv.innerhtml += "<div style = Position: absolut; links: 0; ober: 0; Breite: "+6*iw+"; Höhe: "+ih+"; Hintergrund: RGB (128,128,128); Filter: Alpha (OPACITY = 0, FinishoPacity = 100, Style = 1, Starty = 0, Finishy = 100, Startx = 0, Finishx = 0)> </divy = divy = 100, startx = 0, fundx = 0)> </div style = 'Position: absolut; links: 0; ober: 0; Breite: "+(6*iw+1)+"; Höhe: "+ih+";' onmousemove = hsv ()> </div> "

}

</script>

</body>

</html>

Weitere JS -Farbvorgänge finden Sie in den Farbwerkzeugen dieser Website:

RGB -Farbkodiergenerator

Online -Web -Farb -Matching -Tool

RGB Farbabfrage Vergleich Tabelle_Color Code Tabelle_Colour English Name Collection

Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.