異なる色の値を取得できるカラーセレクターのjs実装例_javascriptスキル-jsチュートリアル-php.cn

異なる色の値を取得できるカラーセレクターのjs実装例_javascriptスキル

WBOY

リリース： 2016-05-16 16:12:12

オリジナル

1261 人が閲覧しました

この記事の例では、さまざまな色の値を取得できるカラーセレクターの js 実装について説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピーコードは次のとおりです:

<頭>
js カラーセレクター、さまざまな色の値を取得できます

<スクリプト>
var iW = '70'; //色は全部で 6 色あり、各色の幅は iW です。 iW*6 はリボンの幅です。
var iH = '400'; //iH はリボンの高さです。
//HSVカラーコードを計算します。
関数 HSV(){
kkk1.value = 'X:' イベント.オフセットX ' Y:' イベント.オフセットY;
var H,S,V;
var pY = イベント.オフセットY;
if(pY == 0){H = S = 0;}
それ以外{
if(pY == iH-1) H = S = V = 0;
それ以外{
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);
}

//RGB カラーコードを計算します。
関数 HSVtoRGB(h,s,v){
var i, f ,p1 ,p2 ,p3;
var r = g = b = 0;
if(s if(s > 1) s=1;
if(v if(v > 1) v=1;
h %= 360;
if(h h /= 60;
i = Math.floor(h);
f = h-i;
p1 = v*(1-s);
p2 = v*(1-s*f);
p3 = v*(1-s*(1-f));
if(i == 0){r=p3;}
else if(i == 1){r=p2; b=p1;}
else if(i == 2){r=p1; b=p3;}
else if(i == 3){r=p1; b=v;}
else if(i == 4){r=p3; b=v;}
else if(i == 5){r=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))
}

//HTML カラーコードを計算します。
関数 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;
}

関数 window.onload(){
var RainBow = new Array(255,0,0, 255,255,0, 0,255,0, 0,255,255, 0,0,255, 255,0,255, 255,0,0);
for(var i=0;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 = "

"
}

その他の JS カラー操作については、このサイトのカラーツールを参照してください:

RGB カラーコーディングジェネレーター

オンライン Web カラーマッチングツール

RGB カラークエリ比較表_カラーコード表_完全な色の英語名

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。