Генератор случайных цветов — JavaScript

Этот урок продемонстрирует процедуру генерации случайных цветов в JavaScript.

Как сгенерировать случайный цвет в JavaScript?

Для генерации случайного цвета в JavaScript используйте « Math.случайный()*16 ”, который создает случайное число от 0 до 16. Это потому, что это один из способов генерировать случайное шестнадцатеричное значение, которое можно использовать для создания случайного цвета.

Пример 1: Генерация случайного цвета
В файле HTML мы создадим контейнер и добавим элемент , который генерирует случайные цвета при нажатии кнопки:

< идентификатор диапазона '=' 'контейнер цвета' >
< идентификатор кнопки '=' 'кнопка' > Нажмите, чтобы создать случайный цвет кнопка >
охватывать >

Теперь добавьте приведенный ниже код в файл JavaScript или тег

---

• Во-первых, мы определили функцию « генератор цвета() », где мы создаем « шестнадцатеричные цифры ” массив шестнадцатеричных чисел от 0 до 9 и от A до F.
• Создайте переменную ' цветовой код ».
• Затем с помощью « для », на каждой итерации методы « Математика » Объект генерирует случайное число от 0 до 16.
• Передайте полученный номер индекса в «hexDigits» и сохраните соответствующее значение индекса в переменной «colorCode».
• Процесс будет повторяться 6 раз для создания 6-значного кода.
• Наконец, добавьте этот код с помощью « # ” подписать и вернуться к функции.

Теперь прикрепите « добавить прослушиватель событий () » для события нажатия кнопки. Вызов определенной функции « генератор цвета() », чтобы изменить цвет фона всего тела:

батн. addEventListener ( 'щелкнуть' , ( ) => {
документ. тело . стиль . фоновый цвет '=' Генератор цветов ( ) ;
} ) ;

Выход

Пример 2. Создание случайного цвета с помощью кода
Здесь мы напечатаем соответствующий случайно сгенерированный цветовой код с цветом, используя « внутреннийHTML ' свойство:

батн. addEventListener ( 'щелкнуть' , ( ) => {
документ. тело . стиль . фоновый цвет '=' Генератор цветов ( ) ;
документ. получитьэлементбиид ( 'цветовой код' ) . внутреннийHTML '=' Генератор цветов ( ) ;
} ) ;

Вывод показывает соответствующий цветовой код с соответствующим цветом фона тела:

Это все о генераторе случайных цветов в JavaScript.

Заключение

Для генерации случайного цвета в JavaScript создайте 6-значный код, используя « Математика ” методы объекта в “ для ' петля. На каждой итерации генерируется цифра цветового кода и постинкрементируется переменная. Этот цветовой код возвращается с «#» в начале. В этом руководстве продемонстрирована процедура генерации случайных цветов в JavaScript.