js pelaksanaan contoh pemilih warna yang boleh mendapatkan nilai warna berbeza_kemahiran javascript

Contoh dalam artikel ini menerangkan pelaksanaan js bagi pemilih warna yang boleh memperoleh nilai warna yang berbeza. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

var iW = '70'; //Terdapat 6 warna kesemuanya, dan lebar setiap warna ialah iW. iW*6 ialah lebar reben.
var iH = '400'; //iH ialah ketinggian reben.
//Kira kod warna HSV.
fungsi HSV(){
kkk1.value = 'X:' event.offsetX ' Y:' event.offsetY;
var H,S,V;
var pY = event.offsetY;
jika(pY = 0){H = S = 0; V = 100;}
lain{
jika(pY ​​== iH-1) H = S = V = 0;
lain{
H = Math.floor(360*event.offsetX/(iW*6));
S = Matematik.pusingan(50*(iH-pY)/(iH/2));
V = Matematik.pusingan(100-50*pY/iH);
}
}
kkk2.value='HSV(' H ',' S '%,' V '%)';
HSVtoRGB(H,S/100,V/100);
}

//Kira kod warna RGB.
fungsi HSVtoRGB(h,s,v){
var i, f ,p1 ,p2 ,p3;
var r = g = b = 0;
jika(s < 0) s=0;
jika(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 = h-i;
p1 = v*(1-s);
p2 = v*(1-s*f);
p3 = v*(1-s*(1-f));
jika(i == 0){r=v; g=p3; lain jika(i == 1){r=p2; g=v; lain jika(i == 2){r=p1; g=v; lain jika(i == 3){r=p1; g=p2; lain jika(i == 4){r=p3; g=p1; lain jika(i == 5){r=v; g=p1; 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))
}

//Kira kod 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 baharu(255,0,0, 255,255,0, 0,255,0, 0,255,255, 0,0,255, 255,0,255, 255,0,0);
untuk(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 = "

"
}
RainBowDiv.innerHTML = "

"
}





Untuk lebih banyak operasi warna js, sila rujuk alat warna di tapak ini:


Penjana Pengekodan Warna RGB

Alat padanan warna web dalam talian

jadual perbandingan pertanyaan warna RGB_kod warna jadual_nama warna bahasa Inggeris lengkap

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.