JavaScript에서 임의의 HEX 색상을 생성하는 방법은 무엇입니까? [쉬운 가이드]-JS 튜토리얼-php.cn

JavaScript에서 임의의 HEX 색상을 생성하는 방법은 무엇입니까? [쉬운 가이드]

PHPz

풀어 주다： 2024-08-01 11:05:03

원래의

896명이 탐색했습니다.

How to Generate Random HEX Color in JavaScript? [Easy Guide]

이 글에서는 숫자와 알파벳의 혼합으로 구성된 임의의 16진수 색상 코드를 생성하는 JavaScript 함수를 만드는 방법을 안내하겠습니다.

이 함수는 실행될 때마다 임의의 16진수 색상을 생성합니다.

function getRandomHexColor() {
    // Generate a random number between 0 and 16777215 (0xFFFFFF in decimal)
    const randomNumber = Math.floor(Math.random() * 16777215);
    // Convert the random number to a hexadecimal string and pad with leading zeros if necessary
    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor;
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

로그인 후 복사

1. 난수 생성

첫 번째 단계에서는 난수를 생성해야 하며 JavaScript Math 객체와 Math Random() 메서드를 사용하여 쉽게 이를 수행할 수 있습니다.

일반적인 무작위 방법을 생성하면 임의의 소수가 제공됩니다. 아래 예를 참조하세요.

const randomValue = Math.random();
console.log(randomValue); // e.g., 0.123456789

로그인 후 복사

하지만 0에서 16777215 사이의 임의의 숫자를 생성해야 합니다. 왜 "999999"나 6자리 숫자 대신 16777215가 필요한지 생각할 수도 있습니다. 숫자 16,777,215이기 때문에 이 8자리 숫자를 사용해야 합니다. 6자리 16진수 색상 코드로 가질 수 있는 가장 높은 값입니다.

16진수 색상 코드는 6자리 숫자를 사용하며 각 숫자는 0~9 또는 A~F일 수 있으며 각 숫자에 대해 16가지 선택이 가능합니다.

즉, 6자리 숫자로 총 16,777,216개의 다양한 색상을 만들 수 있다는 뜻입니다. 가장 큰 16진수 색상 코드는 #FFFFFF이며, 이는 십진수로 16,777,215

에 해당합니다.

따라서 최대 16,777,215의 숫자를 사용하면 알파벳 문자가 포함된 색상을 포함하여 6자리 16진수 코드로 표시되는 모든 색상을 포함할 수 있습니다. 이렇게 하면 숫자든 문자든 가능한 모든 색상이 포함됩니다.

정수를 얻고 소수 값을 방지하려면 Math.floor() 내에 Math.random() 메서드를 래핑하는 것을 잊지 마세요.

const randomNumber = Math.floor(Math.random() * 16777215);
console.log(randomNumber); // e.g., 45326764

로그인 후 복사

2. 숫자를 16진수 문자열로 변환

function getRandomHexColor() {
    const randomNumber = Math.floor(Math.random() * 16777215);
    const randomHexColor = randomNumber.toString(16) //use the `toString(16)` method

}

로그인 후 복사

이제 숫자를 16진수 문자열로 변환해야 하며, 이는 toString(16) 메서드를 사용하여 쉽게 수행할 수 있습니다.

난수에 대해 toString(16) 메소드를 사용하고 16을 인수로 전달하여 16진수 문자열로 변환하기만 하면 됩니다.

이 방법을 사용하면 결과 코드에 F 이후의 문자는 포함되지 않고 0에서 F까지의 숫자와 문자만 포함됩니다.

추가 항목: Next.js의 Google Analytics 추적 코드 [설정 가이드]

3. padStart 메소드 추가

기능이 거의 준비되었습니다. 그러나 잠재적인 문제가 있습니다. 생성된 16진수 색상 코드의 길이가 6자가 아닌 5자일 수도 있습니다.

함수가 5자리 16진수 색상 코드를 반환하는 경우 유효하지 않습니다. 이 문제를 해결하고 항상 6자리 16진수 색상 코드를 얻으려면 코드에 padStart 메소드를 추가해야 합니다.

padStart(6, '0') 메소드는 필요한 경우 앞에 0을 추가하여 색상 코드가 항상 6자리 코드인지 확인합니다.

예를 들어 16진수 코드가 A9A9A이고 문자가 5개만 포함된 경우 padStart(6, '0') 메서드는 앞에 0을 추가하여 6자리 색상 코드로 만들고 결과적으로 0A9A9A가 됩니다. 이렇게 하면 함수가 항상 정확히 6자로 구성된 올바른 형식의 16진수 색상 코드를 반환합니다.

4. 생성된 16진수 코드를 반환합니다.

마지막 단계는 생성된 임의의 16진수 색상 코드를 필요할 때마다 쉽게 사용할 수 있도록 반환하는 것입니다.

템플릿 문자열을 사용하여 색상 코드를 래핑하고 처음에 #을 추가하고 싶기 때문에 이 기능을 사용할 때마다 수동으로 #을 추가할 필요가 없습니다.

function getRandomHexColor() {

    const randomNumber = Math.floor(Math.random() * 16777215);

    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor; //return the code
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

로그인 후 복사