В этой статье я расскажу вам, как создать функцию JavaScript, которая генерирует случайный шестнадцатеричный цветовой код, состоящий из комбинации цифр и алфавитов.

Эта функция генерирует случайный шестнадцатеричный цвет при каждом выполнении:

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 random().

Если вы создадите обычный случайный метод, он выдаст вам случайные десятичные числа, см. пример ниже:

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

Но нам нужно сгенерировать случайное число от 0 до 16777215. Вы можете подумать, зачем мне 16777215 вместо «999999» или любого шестизначного числа. Ну, нам нужно использовать это восьмизначное число, потому что число 16,777,215 — это максимальное значение, которое вы можете получить с помощью шестизначного шестнадцатеричного цветового кода.

Шестнадцатеричные цветовые коды состоят из шести цифр, каждая из которых может иметь значения от 0 до 9 или от A до F, что дает 16 возможных вариантов выбора для каждой цифры.

Это означает, что вы можете создать в общей сложности 16 777 216 различных цветов с шестью цифрами. Самый большой шестнадцатеричный код цвета — #FFFFFF, что соответствует 16 777 215 в десятичном формате.

Итак, используя число до 16,777,215, вы можете охватить все возможные цвета, представленные шестизначным шестнадцатеричным кодом, включая те, которые содержат буквенные символы. Это гарантирует, что будут включены все возможные цвета, независимо от того, используются ли они цифры или буквы.

Не забудьте обернуть метод Math.random() внутри Math.floor(), чтобы обеспечить получение целых чисел и избежать десятичных значений.

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

2. Преобразование числа в шестнадцатеричную строку

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

}

Теперь нам нужно преобразовать число в шестнадцатеричную строку, что легко сделать с помощью метода toString(16).

Просто используйте метод toString(16) для случайного числа и передайте 16 в качестве аргумента, чтобы преобразовать его в шестнадцатеричную строку.

Этот метод гарантирует, что результирующий код будет включать только цифры и буквы от 0 до F, без каких-либо символов, кроме F.

Также читайте: код отслеживания Google Analytics в Next.js [Руководство по настройке]

3. Добавьте метод PadStart.

Наша функция почти готова. Однако существует потенциальная проблема: иногда сгенерированный шестнадцатеричный код цвета может иметь длину всего 5 символов вместо 6.

Если функция возвращает 5-значный шестнадцатеричный код цвета, он недействителен. Чтобы исправить это и гарантировать, что мы всегда получаем 6-значный шестнадцатеричный код цвета, нам нужно добавить в код методpadStart.

МетодpadStart(6, '0') гарантирует, что цветовой код всегда будет 6-значным, путем добавления при необходимости ведущих нулей.

Например, если шестнадцатеричный код — A9A9A и содержит только пять символов, методpadStart(6, '0') добавит начальный 0, чтобы сделать его шестизначным цветовым кодом, в результате чего получится 0A9A9A. Это гарантирует, что функция всегда возвращает правильно отформатированный шестнадцатеричный код цвета, содержащий ровно шесть символов.

4. Верните сгенерированный шестнадцатеричный код.

Последний шаг — вернуть сгенерированный случайный шестнадцатеричный код цвета, чтобы его можно было легко использовать там, где это необходимо.

Я хочу использовать строку шаблона для переноса цветового кода и добавить # в начале, чтобы мне не приходилось добавлять # вручную каждый раз, когда я использую эту функцию.

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

Заключение

Когда я впервые создал генератор случайных шестнадцатеричных цветов в JavaScript, он выдавал только темные или тусклые цвета, поскольку не содержал буквенных символов.

Внеся некоторые изменения в код, я наконец добился желаемого результата. Я также надеюсь, что этот пост сэкономил вам время при создании подобной функции.

Поделитесь этим постом со своими друзьями, которые ищут новый проект или хотят создать что-то с использованием JavaScript!

Также читайте: Как отключить HTML-код без удаления [3 метода]