Генератор на произволни цветове – JavaScript

Този урок ще демонстрира процедурата за генериране на произволни цветове в JavaScript.

Как да генерирам случаен цвят в JavaScript?

За генериране на произволен цвят в JavaScript, използвайте „ Math.random()*16 ” метод, който създава произволно число между 0 и 16. Това е така, защото това е един от начините за генериране на произволна шестнадесетична стойност, която може да се използва за създаване на произволен цвят.

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

< span id = 'colorContainer' >
< идентификатор на бутона = 'btn' > Кликнете, за да генерирате произволен цвят бутон >
педя >

Сега добавете дадения по-долу код в JavaScript файл или

---

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

Сега прикачете „ addEventListener() ” на събитието за щракване на бутона. Извикайте дефинираната функция „ colorGenerator() ”, за да промените цвета на фона на цялото тяло:

btn. addEventListener ( 'клик' , ( ) => {
документ. тяло . стил . Цвят на фона = colorGenerator ( ) ;
} ) ;

Изход

Пример 2: Генериране на случаен цвят с код
Тук ще отпечатаме съответния произволно генериран цветен код с цвета, използвайки „ innerHTML ' Имот:

btn. addEventListener ( 'клик' , ( ) => {
документ. тяло . стил . Цвят на фона = colorGenerator ( ) ;
документ. getElementById ( 'colorCode' ) . innerHTML = colorGenerator ( ) ;
} ) ;

Изходът показва съответния цветен код със съответния фонов цвят на тялото:

Това беше всичко за генератора на произволни цветове в JavaScript.

Заключение

За генериране на произволен цвят в JavaScript, създайте 6-цифрен код, като използвате „ математика ' обектни методи в ' за ” цикъл. При всяка итерация се генерира цифра на цветен код и се увеличава в променлива. Този цветен код се връща с “#” в началото. Този урок демонстрира процедурата за генериране на произволни цветове в JavaScript.