간단한 것을 테스트하기 위해 다른 div 또는 범위에 대해 길고 임의의 색상을 작성하는 것이 지루하거나 피곤한 적이 있습니까?


그래서 여기에 간단한 해결책이 있습니다. 다음 스니펫은 16진수 형식의 임의 색상을 생성합니다.

var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
//generates a random color -> #56eec7

그게 다야!🥳 이것을 함수에 넣고 임의의 색상이 필요할 때마다 함수를 호출할 수 있습니다.

function generateRandomColor()
{
    var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
    return randomColor;
    //random color will be freshly served
}
document.body.style.backgroundColor = generateRandomColor() // -> #e1ac94
someDiv.style.color = generateRandomColor() // -> #34c7aa

자, 이것이 트릭의 끝입니다. 바쁘신 분들은 여기에서 포스트를 남겨주시면 됩니다.

하지만,

숫자 16777215 및 toString(16)만 사용되는 이유를 알고 싶다면 다음 부분에서 해당 설명을 다룹니다.

코드를 3 부분으로 나누자

1.왜 숫자가 16777215입니까?

이것은 약간의 수학이 필요합니다. 색상 범위는 #000000(새까만색)에서 #ffffff(순백색)까지 다양합니다.

rgb 값에 따라 검은색에서 흰색까지 존재하는 색상의 수는 16777216 입니다.

이것은 순열 및 조합 공식을 사용하여 간단히 계산할 수 있습니다.[result = m to the power of n => 16 to power of 6 => 16777216]

그러나 궁극적인 목표는 숫자를 16진수 형식으로 변환하고 16777216를 1000000로 변환하고 16777215를 ffffff로 변환하는 것입니다. 따라서 16진수 변환을 위한 가장 높은 숫자인 167777215

로 진행합니다.

2.무작위성

출력에 임의성이 필요하므로 매직 넘버에 Math.random()를 곱하여 0 포함부터 1 제외 범위의 부동 소수점을 반환합니다.

Math.random()*16777215
//->9653486.355498075

표시된 것처럼 출력은 부동 소수점이며 16진수 변환을 위해 정수로 줄여야 하므로 Math.floor()를 사용합니다.

Math.floor(Math.random()*16777215)
//->96953486

3.16진수 변환

이제 우리는 코드의 마지막 부분인 최종 단계에 있습니다. 숫자를 16진수 형식 문자열로 변환하기 위해 어떤 형식으로 변환해야 하는지 알려주는 숫자를 받아들이는 아름다운 방법toString()이 있습니다.

16진수 형식의 문자열로 변환하므로 다음과 같이 16을 인수로 전달합니다.

(96953486).toString(16)
//->934cee
Math.floor(Math.random()*16777215).toString(16);
//->12ef556

- All we need to now is just attach # before the string

var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
//->#19feac

그게 다야!
감사합니다!
게시물을 성공적으로 완료했습니다.
행복한 C0ding!