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

Lors du développement de sites Web, les développeurs pourraient avoir besoin de générer des couleurs aléatoires à l'aide de JavaScript. Il est utilisé dans le style de page Web, les visualisations de données, la génération de schémas de couleurs, le développement de jeux et bien d'autres. Par exemple, les développeurs créent des effets visuels, tels que des explosions ou des effets de particules dans les jeux, différencient les différents points de données ou catégories dans la visualisation des données, etc.

Ce tutoriel dé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 des couleurs aléatoires en JavaScript, utilisez le «Mathématiques.Random () * 16”Méthode qui crée un nombre aléatoire entre 0 et 16. En effet, c'est une façon 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 créerons un conteneur et ajouterons un élément qui génère les couleurs aléatoires sur le bouton CLIC:

= "ColorContainer">
Cliquez pour générer une couleur aléatoire

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

fonction colorenerator ()
var hexdigits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', ​​'f'];
var colorcode = "";
pour (var i = 0; i<6; i++)
Colorcode + = hexDigits [mathématiques.sol (mathématiques.Random () * 16)];

return '# $ colorcode'

Dans l'extrait de code ci-dessus:

• Premièrement, nous avons défini une fonction "ColorGenerator ()"Où nous créons un"hexdigits”Tableau de numéros 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 du«Mathématiques”L'objet génère un nombre aléatoire entre 0 et 16.
• Passez le numéro d'index qui en résulte au «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 «#”Signe et retournez à la fonction.

Maintenant, joignez le «addEventListener ()"Méthode sur l'événement de clic du bouton. Appelez la fonction définie "ColorGenerator ()«Pour changer la couleur d'arrière-plan de tout le corps:

btn.addEventListener ('click', () =>
document.corps.style.BackgroundColor = ColorGenerator ();
);

Sortir

Exemple 2: générer une couleur aléatoire avec le code
Ici, nous imprimerons le code de couleur généré aléatoire correspondant avec la couleur à l'aide du «innerhtml" propriété:

btn.addEventListener ('click', () =>
document.corps.style.BackgroundColor = ColorGenerator ();
document.GetElementByid ("Colorcode").innerHtml = ColorGenerator ();
);

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

C'était tout au sujet du générateur de couleurs aléatoires en javascript.

Conclusion

Pour générer des couleurs aléatoires en JavaScript, créez un code à 6 chiffres en utilisant «Mathématiques«Méthodes d'objet dans le«pour" boucle. À chaque itération, un chiffre de code couleur est généré et après l'incrément dans une variable. Ce code couleur est retourné avec «#» au début. Ce tutoriel a démontré la procédure de génération de couleurs aléatoires en javascript.