js implémentation d'exemples de sélecteurs de couleurs qui peuvent obtenir différentes compétences en valeurs de couleur_javascript

L'exemple de cet article décrit l'implémentation js d'un sélecteur de couleur qui peut obtenir différentes valeurs de couleur. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

Copier le code Le code est le suivant :

<script><br> var iW = '70'; //Il y a 6 couleurs au total et la largeur de chaque couleur est iW. iW*6 est la largeur du ruban. <br> var iH = '400'; //iH est la hauteur du ruban. <br> //Calculer le code couleur HSV. <br> fonction HSV(){<br> kkk1.value = 'X:' event.offsetX 'Y:' event.offsetY;<br> varH,S,V;<br> var pY = event.offsetY;<br> si(pY ​​== 0){H = S = 0; V = 100;}<br> autre{<br> si(pY ​​== iH-1) H = S = V = 0;<br> autre{<br> H = Math.floor(360*event.offsetX/(iW*6));<br> S = Math.round(50*(iH-pY)/(iH/2));<br> V = Math.round(100-50*pY/iH);<br> ><br> ><br> kkk2.value='HSV(' H ',' S '%,' V '%)';<br> HSV vers RVB (H, S/100, V/100);<br> > <p>//Calculez le code couleur RVB. <br> fonction HSVtoRGB(h,s,v){<br> var je, f ,p1 ,p2 ,p3;<br> var r = g = b = 0;<br> si(s < 0) s=0;<br /> si(s > 1) s=1;<br> si(v < 0) v=0;<br /> si(v > 1) v=1;<br> h %= 360 ;<br> si(h < 0) h =360;<br /> h /= 60;<br /> je = Math.floor(h);<br /> f = salut;<br /> p1 = v*(1-s);<br /> p2 = v*(1-s*f);<br /> p3 = v*(1-s*(1-f));<br /> si(je == 0){r=v; g=p3; b=p1;}<br /> sinon si(i == 1){r=p2; g=v;b=p1;}<br /> sinon si(i == 2){r=p1; g=v;b=p3;}<br /> sinon if(i == 3){r=p1; g=p2;b=v;}<br /> sinon if(i == 4){r=p3; g=p1; b=v;}<br /> sinon si(i == 5){r=v; g=p1; b=p2;}<br /> kkk3.value='RGB(' Math.round(r*255) ',' Math.round(g*255) ',' Math.round(b*255) ')';<br /> RVBvers HTML(Math.round(r*255),Math.round(g*255),Math.round(b*255))<br /> ></p> <p>//Calculez le code couleur HTML. <br /> fonction RGBtoHTML(r,g,b){<br /> r=(r>=16)?r.toString(16):('0' r.toString(16))<br> g=(g>=16)?g.toString(16):('0' g.toString(16))<br> b=(b>=16)?b.toString(16):('0' b.toString(16))<br> kkk4.value='HTML #' r g b;<br> ></p> <p>fonction window.onload(){<br> var RainBow = nouveau tableau (255,0,0, 255,255,0, 0,255,0, 0,255,255, 0,0,255, 255,0,255, 255,0,0);<br> pour(var i=0;i<6;i ){<br /> var R1 = Arc-en-ciel[i*3];<br /> var G1 = Arc-en-ciel[i*3 1];<br /> var B1 = Arc-en-ciel[i*3 2];<br /> var R2 = Arc-en-ciel[(i 1)*3];<br /> var G2 = Arc-en-ciel[(i 1)*3 1];<br /> var B2 = Arc-en-ciel[(i 1)*3 2];<br /> RainBowDiv.innerHTML = "<div style='position:absolute;left:" i*iW ";top:0;largeur:" iW ";hauteur:" iH ";arrière-plan:rgb(" R1 "," G1 " ," B1 ");'></div><div style='position:absolute;left:" i*iW ";top:0;largeur:" iW ";hauteur:" iH ";arrière-plan : rgb(" R2 "," G2 "," B2 ");filter:alpha(opacity=0,finishopacity=100,Style=1);'></div>"<br> ><br> 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;left:0;top:0; largeur:" (6*iW 1) ";hauteur:" iH ";' onmousemove=HSV()></div>"<br> ><br> </script>

Pour plus d'opérations de couleur js, veuillez vous référer à l'outil de couleur sur ce site :

Générateur de codage couleur RVB

Outil de correspondance des couleurs Web en ligne

Comparaison des requêtes de couleurs RVB table_color code table_complete Nom anglais des couleurs

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.