Generator slučajnih boja – JavaScript

Ovaj vodič će pokazati postupak za generiranje nasumičnih boja u JavaScriptu.

Kako generirati nasumične boje u JavaScriptu?

Za generiranje nasumične boje u JavaScriptu upotrijebite ' Math.random()*16 ” koja stvara nasumični broj između 0 i 16. To je zato što je to jedan od načina za generiranje nasumične heksadecimalne vrijednosti, koja se može koristiti za stvaranje nasumične boje.

Primjer 1: Generiraj nasumične boje
U HTML datoteci stvorit ćemo spremnik i dodati element koji generira nasumične boje na klik na gumb:

< span id = 'colorContainer' >
< id gumba = 'btn' > Kliknite za generiranje nasumične boje dugme >
raspon >

Sada dodajte dolje navedeni kod u JavaScript datoteku ili oznaku

---

• Prvo smo definirali funkciju ' ColorGenerator() ” gdje stvaramo “ hexDigits ” niz heksadecimalnih brojeva od 0 do 9 i A do F.
• Napravite varijablu ' colorCode ”.
• Zatim, koristeći ' za ” petlje, na svakoj iteraciji, metode “ matematika ” Objekt generira slučajni broj između 0 i 16.
• Proslijedite rezultirajući broj indeksa u “hexDigits” i pohranite odgovarajuću vrijednost indeksa u varijablu “colorCode”.
• Proces će se ponoviti 6 puta za stvaranje 6-znamenkastog koda.
• Na kraju dodajte ovaj kod s ' # ” znak i povratak na funkciju.

Sada priložite ' addEventListener() ” na događaj klika na gumb. Pozovite definiranu funkciju “ ColorGenerator() ” za promjenu boje pozadine cijelog tijela:

btn. addEventListener ( 'klik' , ( ) => {
dokument. tijelo . stil . boja pozadine = ColorGenerator ( ) ;
} ) ;

Izlaz

Primjer 2: Generirajte nasumične boje pomoću koda
Ovdje ćemo ispisati odgovarajući nasumično generirani kod boje s bojom koristeći ' unutarnjiHTML ” svojstvo:

btn. addEventListener ( 'klik' , ( ) => {
dokument. tijelo . stil . boja pozadine = ColorGenerator ( ) ;
dokument. getElementById ( 'kod boje' ) . unutarnjiHTML = ColorGenerator ( ) ;
} ) ;

Izlaz prikazuje odgovarajući kod boje s relevantnom bojom pozadine tijela:

To je bilo sve o generatoru slučajnih boja u JavaScriptu.

Zaključak

Za generiranje nasumične boje u JavaScriptu, stvorite 6-znamenkasti kod pomoću ' matematika ' objektne metode u ' za ' petlja. U svakoj iteraciji, znamenka koda boje se generira i postinkrementira u varijabli. Ovaj kod boje vraća se s '#' na početku. Ovaj vodič demonstrira postupak za generiranje nasumičnih boja u JavaScriptu.