> 웹 프론트엔드 > JS 튜토리얼 > 다양한 색상 값을 얻을 수 있는 색상 선택기 예제의 js 구현_자바스크립트 기술

다양한 색상 값을 얻을 수 있는 색상 선택기 예제의 js 구현_자바스크립트 기술

WBOY
풀어 주다: 2016-05-16 16:12:12
원래의
1264명이 탐색했습니다.

이 기사의 예에서는 다양한 색상 값을 얻을 수 있는 색상 선택기의 js 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.


js 색상 선택기를 사용하면 다양한 색상 값을 얻을 수 있습니다


<입력 ID=kkk1 스타일=위치:절대;왼쪽:0;상단:0>
<입력 ID=kkk2 스타일=위치:절대;왼쪽:200;상단:0>
<입력 ID=kkk3 스타일=위치:절대;왼쪽:400;상단:0>
<입력 id=kkk4 스타일=위치:절대;왼쪽:600;상단:0>


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;}
그렇지 않으면{
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=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;}
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 = 새 배열(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 = "
"
}


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿