Générateur de couleurs aléatoires – JavaScript

Ce didacticiel vous montrera la procédure de génération de couleurs aléatoires en JavaScript.

Comment générer une couleur aléatoire en JavaScript ?

Pour générer une couleur aléatoire en JavaScript, utilisez le ' Math.aléatoire()*16 ” méthode qui crée un nombre aléatoire entre 0 et 16. En effet, c'est un moyen de générer une valeur hexadécimale aléatoire, qui peut être utilisée pour créer une couleur aléatoire.

Exemple 1 : générer une couleur aléatoire
Dans un fichier HTML, nous allons créer un conteneur et ajouter un élément qui génère les couleurs aléatoires au clic du bouton :

< identifiant de plage = 'colorContainer' >
< identifiant du bouton = 'btn' > Cliquez pour générer une couleur aléatoire bouton >
portée >

Maintenant, ajoutez le code ci-dessous dans le fichier JavaScript ou la balise

---

• Tout d'abord, nous avons défini une fonction ' générateur de couleurs() ' où nous créons un ' chiffres hexadécimaux ” tableau de nombres hexadécimaux de 0 à 9 et A à F.
• Créer une variable ' code couleur ”.
• Ensuite, en utilisant le ' pour ” boucle, à chaque itération, les méthodes de la “ Mathématiques ” L'objet génère un nombre aléatoire entre 0 et 16.
• Transmettez le numéro d'index résultant aux 'hexDigits' et stockez la valeur d'index correspondante dans la variable 'colorCode'.
• Le processus se répétera 6 fois pour créer un code à 6 chiffres.
• Enfin, ajoutez ce code avec le ' # ” signer et revenir à la fonction.

Maintenant, joignez le ' addEventListener() ” méthode sur l'événement de clic du bouton. Appelez la fonction définie ' générateur de couleurs() ” pour changer la couleur de fond de tout le corps :

btn. addEventListener ( 'Cliquez sur' , ( ) => {
document. corps . style . Couleur de l'arrière plan = générateur de couleurs ( ) ;
} ) ;

Sortir

Exemple 2 : générer une couleur aléatoire avec du code
Ici, nous imprimerons le code de couleur généré aléatoirement correspondant avec la couleur en utilisant le ' innerHTML ' propriété:

btn. addEventListener ( 'Cliquez sur' , ( ) => {
document. corps . style . Couleur de l'arrière plan = générateur de couleurs ( ) ;
document. getElementById ( 'code couleur' ) . innerHTML = générateur de couleurs ( ) ;
} ) ;

La sortie affiche le code de couleur correspondant avec la couleur d'arrière-plan pertinente du corps :

C'était tout à propos du générateur de couleurs aléatoires en JavaScript.

Conclusion

Pour générer une couleur aléatoire en JavaScript, créez un code à 6 chiffres en utilisant ' Mathématiques ' méthodes d'objet dans le ' pour ' boucle. A chaque itération, un chiffre de code couleur est généré et post-incrémenté dans une variable. Ce code couleur est renvoyé avec '#' au début. Ce didacticiel a démontré la procédure de génération de couleurs aléatoires en JavaScript.