Generátor náhodných farieb – JavaScript

Tento tutoriál vám ukáže postup generovania náhodných farieb v JavaScripte.

Ako vygenerovať náhodnú farbu v JavaScripte?

Na generovanie náhodných farieb v JavaScripte použite „ Math.random()*16 ” metóda, ktorá vytvára náhodné číslo medzi 0 a 16. Ide totiž o jeden zo spôsobov generovania náhodnej hexadecimálnej hodnoty, ktorú možno použiť na vytvorenie náhodnej farby.

Príklad 1: Generovanie náhodnej farby
V súbore HTML vytvoríme kontajner a pridáme prvok , ktorý generuje náhodné farby pri kliknutí na tlačidlo:

< span id = 'colorContainer' >
< ID tlačidla = 'btn' > Kliknutím vytvoríte náhodnú farbu tlačidlo >
rozpätie >

Teraz pridajte nižšie uvedený kód do súboru JavaScript alebo značky

---

• Najprv sme definovali funkciu „ colorGenerator() “, kde vytvoríme “ hexDigits pole hexadecimálnych čísel od 0 do 9 a od A do F.
• Vytvorte premennú ' colorCode “.
• Potom pomocou „ pre ” cyklu, pri každej iterácii metódy Matematika ” Objekt vygeneruje náhodné číslo od 0 do 16.
• Odovzdajte výsledné číslo indexu do „hexDigits“ a uložte zodpovedajúcu hodnotu indexu do premennej „colorCode“.
• Proces sa zopakuje 6-krát na vytvorenie 6-miestneho kódu.
• Nakoniec pridajte tento kód s „ # ” a vráťte sa do funkcie.

Teraz pripojte „ addEventListener() ” pri udalosti kliknutia na tlačidlo. Zavolajte definovanú funkciu ' colorGenerator() ” na zmenu farby pozadia celého tela:

btn. addEventListener ( 'klikni' , ( ) => {
dokument. telo . štýl . farba pozadia = Generátor farieb ( ) ;
} ) ;

Výkon

Príklad 2: Generovanie náhodnej farby s kódom
Tu vytlačíme zodpovedajúci náhodne vygenerovaný kód farby s farbou pomocou „ innerHTML ' nehnuteľnosť:

btn. addEventListener ( 'klikni' , ( ) => {
dokument. telo . štýl . farba pozadia = Generátor farieb ( ) ;
dokument. getElementById ( 'colorCode' ) . innerHTML = Generátor farieb ( ) ;
} ) ;

Výstup zobrazuje zodpovedajúci farebný kód s príslušnou farbou pozadia tela:

To bolo všetko o generátore náhodných farieb v JavaScripte.

Záver

Na generovanie náhodnej farby v JavaScripte vytvorte 6-miestny kód pomocou „ Matematika “objektové metódy v “ pre “slučka. Pri každej iterácii sa vygeneruje číslica farebného kódu a následne sa zvýši v premennej. Tento farebný kód sa vráti s „#“ na začiatku. Tento tutoriál demonštroval postup generovania náhodných farieb v JavaScripte.