Rumah >hujung hadapan web >tutorial js >js pelaksanaan contoh pemilih warna yang boleh mendapatkan nilai warna berbeza_kemahiran javascript

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

WBOY
WBOYasal
2016-05-16 16:12:121277semak imbas

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:


pemilih warna js, anda boleh mendapatkan nilai warna yang berbeza








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.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn