この記事では、異なる色の値を取得できるカラーセレクターのJS実装について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします：<html>
<head>
<Title> JSカラーセレクター、異なる色の値を取得できます</title>
</head>
<body>
<入力ID = KKK1スタイル=位置：絶対;左：0; TOP：0>
<入力ID = KKK2スタイル=位置：絶対;左：200; TOP：0>
<入力ID = KKK3スタイル=位置：絶対;左：400; TOP：0>
<入力ID = KKK4スタイル=位置：絶対;左：600; TOP：0>
<div id = rainbowdiv style = 'position：absolute; left：200; top：30;'> </div>
<スクリプト>
var iw = '70'; //合計に6色があり、各色の幅はiwです。 IW*6はリボンの幅です。
var ih = '400'; // ihはリボンの高さです。
// HSVカラーコードを計算します。
関数hsv（）{
kkk1.value = 'x：'+event.offsetx+'y：'+event.offsety;
var H、S、V;
var py = event.offsety;
if（py == 0）{h = s = 0; v = 100;}
それ以外{
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 <0）s = 0;
if（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 = hi;
p1 = v*（1-s）;
p2 = v*（1-s*f）;
p3 = v*（1-s*（1-f））;
if（i == 0）{r = v; g = p3; b = p1;}
else if（i == 1）{r = p2; g = v; b = p1;}
else if（i == 2）{r = p1; g = v; b = p3;}
else if（i == 3）{r = p1; g = p2; b = v;}
else if（i == 4）{r = p3; g = p1; b = v;}
else if（i == 5）{r = v; g = p1; b = p2;}
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,0,0）;
for（var i = 0; i <6; i ++）{
var r1 =虹[i*3];
var g1 =虹[i*3+1];
var b1 =虹[i*3+2];
var r2 =虹[（i+1）*3];
var g2 =虹[（i+1）*3+1];
var b2 =虹[（i+1）*3+2];
rainbowdiv.innerhtml+= "<div style = 'position：absolute;左："+i*iw+"; top：0; width："+iw+"; height："+ih+"; background：rgb（"+r1+"、"+g1+"、"+b1+"）;'> </div> <div style = 'position：aspolute; left： "+i*iw+"; top：0; width： "+iw+"; height： "+ih+"; background：rgb（ "+r2+"、 "+g2+"、 "+b2+"）; filter：alpha（opacity = 0、finishopacacity = 100、style = 1）;
}
rainbowdiv.innerhtml += "<divスタイル=位置：絶対;左：0; TOP：0;幅： "+6*iw+"; heigh： "+ih+"; background：rgb（128,128,128）; filter：alpha（finight = 0、finistafacity = 100、style = 1、arty = 0、finishy = 100、startx = 0、finishx = 0）> </div style = 'position：absolute; left：0; top：0; width： "+（6*iw+1）+"; height： "+ih+";' onmousemove = hsv（）> </div> "
}
</script>
</body>
</html>
JSカラー操作の詳細については、このサイトのカラーツールを参照してください。
RGBカラーエンコーディングジェネレーター
オンラインWebカラーマッチングツール
RGBカラークエリ比較テーブル_colorコードテーブル_colour英語名コレクション
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。