Generatore di colori casuali – JavaScript

Questo tutorial dimostrerà la procedura per generare colori casuali in JavaScript.

Come generare colori casuali in JavaScript?

Per generare colori casuali in JavaScript, utilizzare il ' Matematica.casuale()*16 ” che crea un numero casuale compreso tra 0 e 16. Questo perché è un modo per generare un valore esadecimale casuale, che può essere utilizzato per creare un colore casuale.

Esempio 1: Genera colore casuale
In un file HTML, creeremo un contenitore e aggiungeremo un elemento che genera i colori casuali al clic del pulsante:

< id span = 'coloreContenitore' >
< ID pulsante = 'btn' > Fare clic per generare un colore casuale pulsante >
span >

Ora, aggiungi il codice indicato di seguito nel file JavaScript o nel tag

---

• Innanzitutto, abbiamo definito una funzione ' generatore di colori() ” dove creiamo un “ cifre esadecimali ” matrice di numeri esadecimali da 0 a 9 e da A a F.
• Crea una variabile ' codice colore ”.
• Quindi, utilizzando il ' per ” loop, ad ogni iterazione, i metodi del “ Matematica L'oggetto genera un numero casuale compreso tra 0 e 16.
• Passa il numero di indice risultante a 'hexDigits' e memorizza il valore di indice corrispondente nella variabile 'colorCode'.
• Il processo si ripeterà 6 volte per la creazione di un codice a 6 cifre.
• Infine, aggiungi questo codice con ' # ” segno e ritorno alla funzione.

Ora allega il ' addEventListener() ” sull'evento clic del pulsante. Chiama la funzione definita ' generatore di colori() ” per cambiare il colore di sfondo dell'intero corpo:

btn. addEventListener ( 'clic' , ( ) => {
documento. corpo . stile . colore di sfondo = colorGenerator ( ) ;
} ) ;

Produzione

Esempio 2: Genera colore casuale con codice
Qui, stamperemo il corrispondente codice colore generato casualmente con il colore usando il ' innerHTML ' proprietà:

btn. addEventListener ( 'clic' , ( ) => {
documento. corpo . stile . colore di sfondo = colorGenerator ( ) ;
documento. getElementById ( 'codice colore' ) . innerHTML = colorGenerator ( ) ;
} ) ;

L'output mostra il codice colore corrispondente con il relativo colore di sfondo del corpo:

Riguardava il generatore di colori casuali in JavaScript.

Conclusione

Per generare colori casuali in JavaScript, crea un codice a 6 cifre utilizzando ' Matematica ” metodi oggetto nella “ per ' ciclo continuo. Ad ogni iterazione, viene generata una cifra del codice colore e post-incremento in una variabile. Questo codice colore viene restituito con '#' all'inizio. Questo tutorial ha dimostrato la procedura per la generazione di colori casuali in JavaScript.