Générer une couleur aléatoire en JavaScript
-
Utilisation de
Math.floor(Math.random())pour générer une couleur aléatoire à l’aide de JavaScript en HTML - Autre moyen d’obtenir un résultat de couleur aléatoire en JavaScript
Cet article discutera de l’utilisation des fonctions mathématiques intégrées de JavaScript et de la bibliothèque JQuery pour l’interface utilisateur (interface utilisateur) pour changer la couleur d’arrière-plan de la page Web HTML onClick de manière aléatoire par un exemple. En utilisant les fonctions mathématiques, nous pouvons facilement obtenir les valeurs arrondies telles que plancher et plafond, et nous pouvons obtenir une valeur aléatoire en utilisant math.random().
Utilisation de Math.floor(Math.random()) pour générer une couleur aléatoire à l’aide de JavaScript en HTML
La méthode getRandomColor est déclenchée chaque fois que l’utilisateur appuie sur le bouton Change background color. Cette méthode utilise JQuery pour attribuer des styles CSS à notre balise body de la page Web HTML qui changera la couleur d’arrière-plan.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Random colors</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body id ="bodyId" >
<Div style="text-align: center; width: 100%;">
<H1>Generate Random Color using JavaScript/jquery</H1>
<button onclick="getRandomColor()">Change background color</button>
</Div>
</body>
<script>
//The ColorCode() will give the code every time.
function ColorCode() {
var makingColorCode = '0123456789ABCDEF';
var finalCode = '#';
for (var counter = 0; counter < 6; counter++) {
finalCode =finalCode+ makingColorCode[Math.floor(Math.random() * 16)];
}
return finalCode;
}
//Function calling on button click.
function getRandomColor() {
$("#bodyId").css("background-color", ColorCode());
}
</script>
</html>
Dans la source de la page HTML ci-dessus, vous pouvez voir les liens JQuery dans les balises <script> qui sont nécessaires pour utiliser les bibliothèques JQuery dans le doctype html. Dans l’étape suivante, la fonction getRandomColor() est déclarée à l’intérieur de la balise <script> à l’intérieur d’une autre fonction appelée fonction ColorCode() qui attribue un style CSS avec la propriété background-color.
La fonction ColorCode() contient une chaîne de valeurs décimales Hexa en séquence (0-F), nous avons utilisé une boucle for pour exécuter les instructions de code jusqu’à ce que la condition donnée soit vraie. Dans ce cas, la condition à remplir est var counter = 0; counter < 6; counter++.
Cette boucle générera une chaîne finalCode en concaténant des valeurs aléatoires avec une longueur # de 6, puis nous renverrons cette chaîne finalCode et l’utilisons comme attribut de couleur.
Examiner le code HTML donné
Suivez ces quatre étapes simples pour comprendre la méthode getRandomColor.
-
Créer un document texte. Vous pouvez utiliser le bloc-notes ou tout autre outil d’édition de texte.
-
Collez le code donné dans le fichier texte créé.
-
Enregistrez ce fichier texte avec l’extension
.htmlet ouvrez-le avec n’importe quel navigateur par défaut. -
Vous pouvez voir le bouton
Change background color. En utilisant ce bouton, vous pouvez changer la couleur d’arrière-plan de manière aléatoire.
Autre moyen d’obtenir un résultat de couleur aléatoire en JavaScript
Vous pouvez également obtenir la sélection de couleurs aléatoire dans JavaScript en utilisant une seule ligne de code, comme indiqué ci-dessous. Il minimise la longueur du code pour gagner du temps/mémoire et donner des résultats efficaces.
function generateRandomCode() {
var myRandomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
return myRandomColor;
}
// will generate any random color
Dans les deux exemples, generateRandomCode() et ColorCode() renverront une chaîne de couleur aléatoire en utilisant la méthode JavaScript intégrée Math.random() avec une combinaison de valeurs de longueur 6.