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
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:
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))
}
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 R2 = RainBow[(i 1)*3];
var G2 = RainBow[(i 1)*3 1];
var B2 = RainBow[(i 1)*3 2];
RainBowDiv.innerHTML = "
}
RainBowDiv.innerHTML = ""
}