Generatore di colori casuali - Javascript

Durante lo sviluppo di siti Web, gli sviluppatori potrebbero aver bisogno di generare colori casuali usando JavaScript. Viene utilizzato nello stile della pagina Web, visualizzazioni dei dati, generazione di schemi di colore, sviluppo del gioco e molti altri. Ad esempio, gli sviluppatori creano effetti visivi, come esplosioni o effetti di particelle nei giochi, distinguere tra diversi punti dati o categorie nella visualizzazione dei dati e così via.

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

Come generare colore casuale in javascript?

Per generare colore casuale in JavaScript, utilizzare il “Matematica.casuale ()*16"Metodo che crea un numero casuale tra 0 e 16. Questo perché è un modo per generare un valore esadecimale casuale, che può essere usato per creare un colore casuale.

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

= "ColorContainer">
Fai clic per generare colore casuale

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

funzione colorgenerator ()
var hexdigits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', ​​'f'];
var colorCode = "";
per (var i = 0; i<6; i++)
ColorCode += hexdigits [matematica.pavimento (matematica.casuale ()*16)];

return '#$ ColorCode'

Nel frammento di codice sopra:

• Innanzitutto, abbiamo definito una funzione "colorgenerator ()"Dove creiamo un"hexdigits"Array di numeri esadecimali da 0 a 9 e da a a f.
• Crea una variabile "codice colore".
• Quindi, usando il “per"Loop, su ogni iterazione, i metodi del"Matematica"L'oggetto genera un numero casuale da 0 a 16.
• Passa il numero di indice risultante al "hexdigits" e memorizza il valore dell'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 "#"Firma e torna alla funzione.

Ora, attacca il "addEventListener ()"Metodo sull'evento di clic del pulsante. Chiama la funzione definita "colorgenerator ()"Per cambiare il colore di sfondo di tutto il corpo:

btn.addEventListener ('Click', () =>
documento.corpo.stile.sfondoColor = colorGenerator ();
);

Produzione

Esempio 2: generare colore casuale con il codice
Qui, stamperemo il codice colore generato in modo casuale corrispondente con il colore usando il “Innerhtml" proprietà:

btn.addEventListener ('Click', () =>
documento.corpo.stile.sfondoColor = colorGenerator ();
documento.getElementById ("ColorCode").InnerHTML = colorGenerator ();
);

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

Questo riguardava il generatore di colori casuali in JavaScript.

Conclusione

Per generare colore casuale in JavaScript, creare un codice a 6 cifre usando "Matematica"Metodi oggetto in"per" ciclo continuo. Ad ogni iterazione, viene generata una cifra di codice colore e post-incremento in una variabile. Questo codice colore viene restituito con "#" all'inizio. Questo tutorial ha dimostrato la procedura per generare colori casuali in JavaScript.