Generátor náhodných barev – JavaScript

Tento tutoriál předvede postup generování náhodných barev v JavaScriptu.

Jak generovat náhodné barvy v JavaScriptu?

Pro generování náhodné barvy v JavaScriptu použijte „ Math.random()*16 ” metoda, která vytváří náhodné číslo mezi 0 a 16. Je to proto, že je to jeden ze způsobů, jak generovat náhodnou hexadecimální hodnotu, kterou lze použít k vytvoření náhodné barvy.

Příklad 1: Generování náhodné barvy
V souboru HTML vytvoříme kontejner a přidáme prvek , který generuje náhodné barvy po kliknutí na tlačítko:

< id span = 'barevný kontejner' >
< ID tlačítka = 'btn' > Kliknutím vygenerujete náhodnou barvu knoflík >
rozpětí >

Nyní přidejte níže uvedený kód do souboru JavaScript nebo značky

---

• Nejprve jsme definovali funkci „ colorGenerator() “, kde vytvoříme “ hexDigits pole hexadecimálních čísel od 0 do 9 a od A do F.
• Vytvořte proměnnou ' colorCode “.
• Poté pomocí „ pro ” cyklu, při každé iteraci, metody “ Matematika ” Objekt generuje náhodné číslo mezi 0 až 16.
• Předejte výsledné číslo indexu „hexDigits“ a uložte odpovídající hodnotu indexu do proměnné „colorCode“.
• Proces se bude opakovat 6krát pro vytvoření 6místného kódu.
• Nakonec přidejte tento kód s „ # ” a vraťte se do funkce.

Nyní připojte „ addEventListener() “ v události kliknutí tlačítka. Zavolejte definovanou funkci ' colorGenerator() ” pro změnu barvy pozadí celého těla:

btn. addEventListener ( 'kliknout' , ( ) => {
dokument. tělo . styl . barva pozadí = Generátor barev ( ) ;
} ) ;

Výstup

Příklad 2: Generování náhodné barvy s kódem
Zde vytiskneme odpovídající náhodně vygenerovaný barevný kód s barvou pomocí „ vnitřní HTML ' vlastnictví:

btn. addEventListener ( 'kliknout' , ( ) => {
dokument. tělo . styl . barva pozadí = Generátor barev ( ) ;
dokument. getElementById ( 'colorCode' ) . vnitřní HTML = Generátor barev ( ) ;
} ) ;

Výstup zobrazuje odpovídající kód barvy s příslušnou barvou pozadí těla:

To bylo vše o generátoru náhodných barev v JavaScriptu.

Závěr

Pro generování náhodné barvy v JavaScriptu vytvořte 6místný kód pomocí „ Matematika “objektové metody v “ pro “smyčka. Při každé iteraci se vygeneruje číslice barevného kódu a následně se zvýší v proměnné. Tento kód barvy je vrácen s „#“ na začátku. Tento tutoriál demonstroval postup generování náhodných barev v JavaScriptu.