В этой статье описывается реализация JS селекторов цвета, которые могут получить разные значения цвета. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <html>
<голова>
<Title> JS -селектор цвета, вы можете получить разные значения цвета </title>
</head>
<тело>
<input id = kkk1 style = позиция: абсолют; слева: 0; верх: 0>
<input id = kkk2 style = позиция: абсолютно; слева: 200; верх: 0>
<input id = kkk3 style = позиция: абсолют; слева: 400; верх: 0>
<input id = kkk4 style = позиция: абсолют; слева: 600; верх: 0>
<div id = Rainbowdiv Style = 'Положение: абсолют; слева: 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;}
иначе if (i == 1) {r = p2; G = V; b = p1;}
иначе if (i == 2) {r = p1; G = V; b = p3;}
иначе if (i == 3) {r = p1; G = P2; b = v;}
иначе if (i == 4) {r = p3; G = P1; b = v;}
иначе 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;
}
function window.onload () {
var Rainbow = новый массив (255,0,0, 255,255,0, 0,255,0, 0,255,255, 0,0,255, 255,0,0,0);
для (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+"; фон: rgb ("+r1+","+g1+","+b1+"); Style = 'Положение: Absolute; слева: "+i*iw+"; top: 0; width: "+iw+"; height: "+ih+"; founal: rgb ("+r2+", "+g2+", "+b2+"); фильтр: alpha (непрозрачность = 0, finishopatice = 100, style = 1);> </div> ""
}
Rainbowdiv.innerhtml += "<div Стиль = позиция: абсолют; слева: 0; верх: 0; ширина: "+6*iw+"; высота: "+ih+"; фон: rgb (128,128,128); фильтр: альфа (непрозрачность = 0, finishopacity = 100, style = 1, starty = 0, finidy = 100, startx = 0, finidyx = 0)> </div> <div style = 'position: Absolute; слева: 0; Top: 0; ширина: "+(6*iw+1)+"; высота: "+ih+";' onmouseMove = hsv ()> </div> "
}
</script>
</body>
</html>
Для получения дополнительной информации о цветных операциях JS, пожалуйста, обратитесь к цветным инструментам этого сайта:
RGB Color Concoding Generator
Инструмент по сопоставлению веб -цвета онлайн
Сравнение цветовых запросов RGB table_color code table_colour Английские имена коллекция
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.