이 기사에서는 다른 색상 값을 얻을 수있는 색상 선택기의 JS 구현에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<title> js 색상 선택기, 다른 색상 값을 얻을 수 있습니다 </title>
</head>
<body>
<입력 ID = KKK1 스타일 = 위치 : 절대; 왼쪽 : 0; 상단 : 0>
<입력 ID = KKK2 스타일 = 위치 : 절대; 왼쪽 : 200; 상단 : 0>
<입력 ID = KKK3 스타일 = 위치 : 절대; 왼쪽 : 400; 상단 : 0>
<입력 ID = KKK4 스타일 = 위치 : 절대; 왼쪽 : 600; 상단 : 0>
<div id = Rainbowdiv Style = '위치 : 절대; 왼쪽 : 200; 상단 : 30;'> </div>
<cript>
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;}
그렇지 않으면 (i == 1) {r = p2; g = V; b = p1;}
그렇지 않으면 (i == 2) {r = p1; g = V; b = p3;}
그렇지 않으면 (i == 3) {r = p1; g = p2; b = v;}
그렇지 않으면 (i == 4) {r = p3; g = p1; b = v;}
그렇지 않으면 (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)?
kkk4.value = 'html #'+r+g+b;
}
함수 Window.onload () {
VAR RAINBOW = 새로운 배열 (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 = '위치 : 절대; 왼쪽; 왼쪽 :"+i*iw+"; 상단 : 0; 너비 :"+iw+"; 높이 :"+ih+"; 배경 : rgb ("+r1+","+g1+","+b1+");'> <div 스타일 = '위치 : 왼쪽 : "+i*iw+"; 상단 : 0; 너비 : "+iw+"; 높이 : "+ih+"; 배경 : rgb ( "+r2+", "+g2+", "+b2+"); 필터 : alpha (불투명 = 0, finishopacity = 100, style = 1);'> </div> "
}
Rainbowdiv.innerhtml += "<div 스타일 = 위치 : 왼쪽; 왼쪽 : 0; 상단 : 0; 너비 : "+6*iw+"; 높이 : "+ih+"; 배경 : RGB (128,128,128); 필터 : 알파 (exacity = 0, finishoyopacity = 100, style = 1, starty = 0, finishy = 100, startx = 0, finishtex = 0)> <div style = '위치 : 절대; 왼쪽 : 0; 상단 : 0; 너비 : "+(6*iw+1)+"; 높이 : "+ih+";' OnMousEmove = hsv ()> </div> "
}
</스크립트>
</body>
</html>
더 많은 JS 색상 작업은이 사이트의 색상 도구를 참조하십시오.
RGB 색상 인코딩 생성기
온라인 웹 색상 일치 도구
RGB 색상 쿼리 비교 table_color 코드 table_colour 영어 이름 수집
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.