js 임의 색상 코드_javascript 기술의 다양한 구현 방법

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;

var a = []
for ( var i=0, j=this.length; i < j; i ) {
a.push (fn.call(scope, this[i], i, this));
}
return a;
}
var getRandomColor = function(){
return '#' '0123456789abcdef'.split('').map(function(v,i,a){
return i>5 ? null : a[Math.floor(Math.random()*16)] }).join ('');
}

이를 위해서는 배열을 일부 확장해야 합니다. 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 값을 얻는 방법을 살펴 보겠습니다.

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

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

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이 채워지고 재귀 감지도 생략됩니다.

실제로 해보자:

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

以下为引사용용内容：

 
   
    < ;title>初级饼图
   
   
   
 
 
    < ;p>初级23232饼图

   

 

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)

2 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

Repo : 팀원을 부활시키는 방법

4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

스플릿 소설을이기는 데 얼마나 걸립니까?

3 몇 주 전 By DDD

R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?

3 몇 주 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7316

9

자바 튜토리얼

1625

14

Cakephp 튜토리얼

1349

46

라라벨 튜토리얼

1261

25

PHP 튜토리얼

1209

29

더보기