js 임의 색상 코드_javascript 기술의 다양한 구현 방법-JS 튜토리얼-php.cn

JS 임의 색상은 여러 곳에서 사용됩니다. 예를 들어 태그 연결이 다채롭다는 것을 알 수 있습니다. 그럼 당신은 이것에 도달해야합니다. 아래에서 시작하세요:

총 2가지 방법이 있습니다. 하나는 아름다운 후보 색상 세트를 준비하는 것이고, 다른 하나는 무작위로 색상을 생성하는 것입니다.

구현 1

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

var getRandomColor = function (){ 

 return '#' 
 (function(color){ 
 return (color = '0123456789abcdef'[Math.floor(Math.random()*16)]) 
 && (color .length == 6) ? color:args.callee(color); 
 })('') 

6자를 무작위로 생성하고 함께 연결합니다. . 자신을 호출하는 클로저와 삼항 연산자는 프로그램을 더욱 내성적으로 만듭니다. 초보자는 이 작성 방법을 배워야 합니다.
구현 2

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

var getRandomColor = function(){ 

 return (function(m,s,c){ 
 return (c ?argments.callee(m,s,c-1) : '#') 
 s[m.floor(m. random() * 16)] 
 })(Math,'0123456789abcdef',5) 
} 

16진수 색상 값을 생성하는 데 사용되는 문자열인 Math 객체를 추출하고 세 가지 매개변수를 사용하여 자신을 계속 호출할지 여부를 결정하세요.
3개 달성

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

인용 내용은 다음과 같습니다.
Array.prototype.map = function(fn, thisObj) {

var range = thisObj || window;

이를 위해서는 배열을 일부 확장해야 합니다. Map은 배열을 반환한 다음 Join을 사용하여 해당 요소를 문자로 묶습니다.

구현 4

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

다음은 인용된 내용:

var getRandomColor = function(){

return '#' Math.floor(Math.random()*16777215).toString(16);

}

이 구현은 약간의 버그가 있지만 놀랍습니다. 16진수 색상 값은 #000000부터 #ffffff까지이고, 다음 6자리는 16진수 숫자로 "0x000000"부터 "0xffffff"까지라는 것을 알고 있습니다. 이 구현의 아이디어는 16진수 ffffff의 최대값을 먼저 10진수로 변환하고 무작위화를 수행한 다음 다시 16진수로 변환하는 것입니다. 16777215 값을 얻는 방법을 살펴 보겠습니다.

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

인용 내용은 다음과 같습니다.

16진수의 최대값

5 구현

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

인용된 내용은 다음과 같습니다.

var getRandomColor = function(){

'#' 반환(Math.random()*0xffffff<<0).toString(16);

}

기본적으로 왼쪽 시프트 연산자를 사용하여 0xffffff를 정수로 변환하여 4의 개선 사항을 구현합니다. 이렇게 하면 16777215를 기억할 필요가 없습니다. 왼쪽 시프트 연산자의 우선순위가 곱하기 기호만큼 좋지 않기 때문에 무작위화 후에 왼쪽 시프트가 이루어지며 Math.floor도 사용되지 않습니다.

구현 6

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

다음은 인용된 내용:

var getRandomColor = function(){

return '#' (function(h){
return new Array(7-h.length).join("0") h
})((Math.random()*0x1000000<< ;0).toString(16))
}

위 버전의 버그를 수정합니다(순수한 흰색 및 부족한 16진수를 생성할 수 없음). 0x1000000은 0xffffff 1과 동일하므로 0xffffff가 그려집니다. 클로저에서는 16진수 값이 5자리 미만인 문제를 다루고 나머지 자리는 0으로 직접 채웁니다.

구현 7

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

다음은 인용된 내용:

var getRandomColor = function(){

return '#' ('00000' (Math.random()*0x1000000<<0).toString(16)).substr(-6)
}

이번에는 앞에 0이 채워지고 재귀 감지도 생략됩니다.