Generator de culori aleatorii – JavaScript

Acest tutorial va demonstra procedura de generare a culorilor aleatorii în JavaScript.

Cum se generează culoare aleatoare în JavaScript?

Pentru a genera culori aleatorii în JavaScript, utilizați „ Matematică.aleatorie()*16 ” metoda care creează un număr aleator între 0 și 16. Aceasta deoarece este o modalitate de a genera o valoare hexazecimală aleatoare, care poate fi folosită pentru a crea o culoare aleatoare.

Exemplul 1: Generați culoare aleatorie
Într-un fișier HTML, vom crea un container și vom adăuga un element care generează culori aleatorii la clic pe buton:

< span id = „container de culoare” >
< ID-ul butonului = 'btn' > Faceți clic pentru a genera culoare aleatorie buton >
span >

Acum, adăugați codul de mai jos în fișierul JavaScript sau eticheta

---

• În primul rând, am definit o funcție „ colorGenerator() ' unde creăm un ' hexDigits ” matrice de numere hexazecimale de la 0 la 9 și de la A la F.
• Creați o variabilă „ Codul culorii ”.
• Apoi, folosind „ pentru ” bucla, la fiecare iterație, metodele “ Matematică ”Obiectul generează un număr aleator între 0 și 16.
• Treceți numărul de index rezultat la „hexDigits” și stocați valoarea indexului corespunzătoare în variabila „colorCode”.
• Procesul se va repeta de 6 ori pentru a crea un cod din 6 cifre.
• În cele din urmă, adăugați acest cod cu „ # ” semnează și revin la funcție.

Acum, atașați „ addEventListener() ” pe evenimentul de clic al butonului. Apelați funcția definită „ colorGenerator() ” pentru a schimba culoarea de fundal a întregului corp:

btn. addEventListener ( 'clic' , ( ) => {
document. corp . stil . culoare de fundal = colorGenerator ( ) ;
} ) ;

Ieșire

Exemplul 2: Generați culoare aleatoare cu cod
Aici, vom tipări codul de culoare corespunzător generat aleatoriu cu culoarea folosind „ innerHTML ” proprietate:

btn. addEventListener ( 'clic' , ( ) => {
document. corp . stil . culoare de fundal = colorGenerator ( ) ;
document. getElementById ( 'Codul culorii' ) . innerHTML = colorGenerator ( ) ;
} ) ;

Ieșirea arată codul de culoare corespunzător cu culoarea de fundal relevantă a corpului:

Asta era totul despre generatorul de culori aleatorii din JavaScript.

Concluzie

Pentru a genera culori aleatorii în JavaScript, creați un cod din 6 cifre folosind „ Matematică ” metodele obiect în „ pentru ” buclă. La fiecare iterație, o cifră de cod de culoare este generată și post-increment într-o variabilă. Acest cod de culoare este returnat cu „#” la început. Acest tutorial a demonstrat procedura de generare a culorilor aleatorii în JavaScript.