Generador de colors aleatoris - JavaScript

Aquest tutorial mostrarà el procediment per generar colors aleatoris en JavaScript.

Com generar un color aleatori en JavaScript?

Per generar color aleatori en JavaScript, utilitzeu el ' Matemàtiques.atzar()*16 ” mètode que crea un nombre aleatori entre 0 i 16. Això és perquè és una manera de generar un valor hexadecimal aleatori, que es pot utilitzar per crear un color aleatori.

Exemple 1: genera un color aleatori
En un fitxer HTML, crearem un contenidor i afegirem un element que generi els colors aleatoris al clic del botó:

< identificador d'abast = 'colorContainer' >
< identificador del botó = 'btn' > Feu clic per generar un color aleatori botó >
span >

Ara, afegiu el codi indicat a continuació al fitxer JavaScript o a l'etiqueta

---

• En primer lloc, hem definit una funció ' colorGenerator() ' on creem un ' xifres hexadecimales ” matriu de nombres hexadecimals del 0 al 9 i de la A a la F.
• Crea una variable ' codi de color ”.
• A continuació, utilitzant el ' per ” bucle, en cada iteració, els mètodes del “ Matemàtiques ”L'objecte genera un nombre aleatori entre 0 i 16.
• Passeu el número d'índex resultant als 'hexDigits' i emmagatzemeu el valor d'índex corresponent a la variable 'colorCode'.
• El procés es repetirà 6 vegades per crear un codi de 6 dígits.
• Finalment, afegiu aquest codi amb el ' # ” signar i tornar a la funció.

Ara, adjunteu el ' addEventListener() ” en l'esdeveniment de clic del botó. Crida la funció definida ' colorGenerator() ” per canviar el color de fons de tot el cos:

btn. addEventListener ( 'clic' , ( ) => {
document. cos . estil . color de fons = ColorGenerator ( ) ;
} ) ;

Sortida

Exemple 2: generar un color aleatori amb codi
Aquí, imprimirem el codi de color corresponent generat aleatòriament amb el color mitjançant el ' innerHTML ' propietat:

btn. addEventListener ( 'clic' , ( ) => {
document. cos . estil . color de fons = ColorGenerator ( ) ;
document. getElementById ( 'codi de color' ) . innerHTML = ColorGenerator ( ) ;
} ) ;

La sortida mostra el codi de color corresponent amb el color de fons rellevant del cos:

Això es tractava del generador de colors aleatoris a JavaScript.

Conclusió

Per generar un color aleatori en JavaScript, creeu un codi de 6 dígits amb ' Matemàtiques ' mètodes d'objectes a la ' per ” bucle. En cada iteració, es genera un dígit de codi de color i després de l'increment en una variable. Aquest codi de color es torna amb '#' al principi. Aquest tutorial va demostrar el procediment per generar colors aleatoris en JavaScript.