Artikel ini menjelaskan implementasi pemilih warna JS yang dapat memperoleh nilai warna yang berbeda. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <Html>
<head>
<iteme> js color selector, Anda bisa mendapatkan nilai warna yang berbeda </iteme>
</head>
<body>
<Input ID = KKK1 Style = Posisi: Absolute; Left: 0; Top: 0>
<Input ID = KKK2 Style = Posisi: Absolute; Left: 200; Top: 0>
<Input ID = KKK3 Style = Posisi: Absolute; Left: 400; Top: 0>
<Input ID = KKK4 Style = Posisi: Absolute; Left: 600; Top: 0>
<Div ID = RainbowDiv style = 'Posisi: Absolute; Left: 200; Top: 30;'> </div>
<script>
var iw = '70'; // Ada 6 warna secara total, dan lebar masing -masing warna adalah IW. IW*6 adalah lebar pita.
var ih = '400'; // Ih adalah ketinggian pita.
// Hitung kode warna HSV.
fungsi 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;}
kalau tidak{
if (py == ih-1) h = s = v = 0;
kalau tidak{
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);
}
// Hitung kode warna RGB.
fungsi 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 = Hai;
P1 = V*(1-S);
p2 = v*(1-s*f);
p3 = v*(1-s*(1-f));
if (i == 0) {r = v; g = p3; b = p1;}
lain jika (i == 1) {r = p2; g = v; b = p1;}
lain jika (i == 2) {r = p1; g = v; b = p3;}
lain jika (i == 3) {r = p1; g = p2; b = v;}
lain jika (i == 4) {r = p3; g = p1; b = v;}
lain jika (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))
}
// Hitung kode warna HTML.
fungsi 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 = array baru (255,0,0, 255,255,0, 0,255,0, 0,255,255, 0,0,255, 255,0,0,0);
untuk (var i = 0; i <6; i ++) {
var r1 = pelangi [i*3];
var g1 = pelangi [i*3+1];
var b1 = pelangi [i*3+2];
var r2 = pelangi [(i+1)*3];
var g2 = pelangi [(i+1)*3+1];
var b2 = pelangi [(i+1)*3+2];
RainbowDiv.innerHtml+= "<Div style = 'Posisi: absolute; kiri:"+i*iw+"; atas: 0; lebar:"+iw+"; tinggi:"+ih+"; latar belakang: rgb ("+r1+","+g1+","+b1+");'> </div> div> style = 'position: absolute; kiri: "+i*iw+"; atas: 0; lebar: "+iw+"; tinggi: "+ih+"; latar belakang: rgb ("+r2+", "+g2+", "+b2+"); filter: alpha (opacity = 0, finishopacity = 100, style = 1);
}
RainBowDiv.innerHTML += "<div style=position:absolute;left:0;top:0;width:"+6*iW+";height:"+iH+";background:rgb(128,128,128);filter:alpha(opacity=0,finishOpacity=100,style=1,starty=0,finishy=100,startx=0,finishx=0)></div><div style = 'position: absolute; kiri: 0; atas: 0; lebar: "+(6*iw+1)+"; tinggi: "+ih+";' onMouseMove = hsv ()> </div> "
}
</script>
</body>
</html>
Untuk lebih banyak operasi warna JS, silakan merujuk ke alat warna situs ini:
Generator penyandian warna RGB
Alat pencocokan warna web online
RGB Color Query Perbandingan Table_color Code Table_Colour Koleksi Nama Bahasa Inggris
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.