Couleur aléatoire CSS

Les couleurs et les animations sont largement utilisées sur les sites Web construits par les scripts HTML pour les rendre plus agréables et esthétiques. Parfois, ces couleurs pouvaient être vues rapidement changer à un élément de HTML. Cela se produirait en raison de l'utilisation des fonctions «setInterval». Certains d'entre vous ont peut-être pensé à changer aléatoirement les couleurs des éléments HTML tout en faisant des scripts HTML. Vous avez peut-être pensé à une pure moyen de le faire, mais je n'ai pas pu trouver la solution. Si c'est le cas, cet article est pour vous d'acquérir une expertise sur la modification de la couleur de tout élément de HTML au hasard.

Exemple # 01

Commençons par le premier exemple de cet article en démontrant l'utilisation de la fonction de couleur simple pour générer des couleurs aléatoires sur des éléments HTML. Cet exemple de code a commencé à partir de la balise principale HTML suivie de la balise de tête vide. Nous utilisons la balise corporelle pour définir les éléments du corps de cette page HTML, suivis de la balise de script contenant un style JavaScript pour faire de cette page esthétique et stylée. Le texte du corps a été aligné sur le centre à l'aide de la propriété «Text-Align» dans la balise de style en ligne. Deux titres de taille 1 ont été utilisés ici.

Le premier titre utilise le style en ligne pour colorer le vert en utilisant la propriété de couleur. Tandis que le deuxième titre a été spécifié avec l'ID «Pick» et la balise de style en ligne pour la colorer en rouge pendant un certain temps via la propriété «couleur». Après cela, la balise de bouton est utilisée avec l'attribut onClick obtenant la valeur de retour de la fonction "PickColor ()" pour spécifier quelle couleur doit être affichée en appuyant sur ce bouton. Voici le code JavaScript pour ce script HTML pour le rendre dynamique. Il contient la balise de script suivie par l'utilisation de la définition de la fonction pour la méthode «PickColor». Cette méthode a initialisé un tableau «col» prenant différentes couleurs, je lui.e., en utilisant les nombres de couleurs spécifiques.

Une autre variable, «random_color», a été utilisée pour obtenir la couleur aléatoire du tableau «col» en appliquant les fonctions «plancher» et «aléatoire» de la bibliothèque mathématique. Quelle que soit la valeur «plancher» calculée, elle serait utilisée pour obtenir la couleur aléatoire de l'index spécifique de ce tableau. L'ID «Pick» de la tête 2 pour ce fichier HTML a été utilisé pour obtenir l'ID et enregistré à la variable «X». Après cela, l'attribut de style «couleur» a été appliqué à la variable «x» à la couleur de couleur aléatoire 2 en utilisant la variable «random_color». C'est tout sur ce code. Laissez-le et exécutons-le avec le menu «Run».

La sortie du navigateur Chrome est montrée dans l'image suivante. Il montre deux titres suivis d'un bouton simple. Le premier titre est statique, tandis que le deuxième titre a été utilisé pour changer de couleur au hasard chaque fois qu'un utilisateur tape sur le bouton.

Avant de taper sur le bouton, la couleur de l'en-tête était rouge. Après avoir tapé dessus, il s'avère comme indiqué ci-dessous, je.e., Orange léger:

En tapant à nouveau sur le bouton, la couleur de la tête devient jaune.

Le taraudage sur le bouton modifie à nouveau la couleur de l'en-tête vers le vert.

Comme ceci, chaque robinet sur le bouton changerait au hasard la couleur d'un titre, je.e., bleu, vert, jaune, etc.

Exemple # 02

Commençons par l'exemple avancé de modification aléatoire de la couleur d'un élément du fichier html. Nous avons créé un fichier HTML qui modifiera au hasard la couleur de certains titres après chaque seconde sans utiliser de bouton ni appuyer sur la section. De plus, nous créerons une section «div» aléatoire et la remplira d'une couleur aléatoire en cliquant sur n'importe quelle zone de la page HTML. Nous vous suggérons de lire d'abord l'explication de la balise «corporelle», puis de passer par cette section de l'explication de la page HTML. Le fichier HTML a commencé avec la balise de style pour colorer les différents éléments HTML de cette page Web. L'ID «#Color» a été utilisé pour définir la largeur et la hauteur de la «plus petite» entrée «div» à 10EM et 6EM, respectivement. Le titre 1, la tête 4 et la famille de polices de paragraphe ont été mis à Sans-Serif. Le texte a été aligné sur le centre. Tandis que la classe «boîte» a été spécifiée pour définir la largeur, la hauteur, les éléments d'alignement et la propriété de justifier pour la deuxième section «div» à 100%, 33VH, Centre et Centre, respectivement. Le style a été fait ici:

'

Dans le code JavaScript de ce fichier, nous avons appelé la fonction «setInterval» en lui faisant passer une couleur aléatoire à l'aide d'une fonction «setColor» après chaque milliseconde. La fonction «setColor» a pris la couleur aléatoire à l'aide de la fonction «RandomehexadeCimalColorstring ()», obtenant l'ID de la première section «div» et appliquant la couleur aléatoire sur la «div» particulière. La fonction «ChangeColor» a été utilisée ici pour créer un tableau de couleurs et choisir au hasard une couleur dans son tableau par une méthode «plancher».

Cela serait appliqué à la section intérieure «div» du deuxième élément «div» du corps pour modifier au hasard la couleur d'une case «div». La fonction «rgbcolor» a été utilisée pour initialiser la valeur des couleurs rouge, vert et bleu tout en utilisant la fonction «RandomNumber» précédente.

E randomhexadecimalColorString () La fonction obtiendrait la valeur de la combinaison rouge, vert et bleu en utilisant la fonction «tostring» et «padstart» et retourner à sa fonction d'appel. Le ChangeColorrandomly () La fonction utilise à nouveau le randomhexadecimalColorString () Fonction Pour modifier la couleur d'une boîte en fonction du numéro de couleur spécifié par l'ID "Texte". La fonction «ClickHandler» est utilisée pour modifier au hasard la couleur d'une case lorsque vous cliquez sur n'importe où dans la section.

La balise HTML «Body» contient le style en ligne pour aligner le texte. Il contient le centre via l'utilisation de la propriété «Text-Align». Nous avons deux principaux éléments «div» pour diviser la page en 2 sections. Le premier contient l'ID «Auto» pour la différenciation, tandis que l'autre contient la classe «Box». La première section «div» ne contient qu'un seul cap de la taille 1 avec son titre d'en-tête unique. L'autre section «div» contient un autre «div» qui a utilisé l'élément HTML «P» pour ajouter le paragraphe de 1 ligne et l'élément de balise «d'entrée» pour obtenir l'ID de couleur comme entrée et modifier la couleur de ce "Div" selon cela.

Parallèlement à cela, le cap H4 de cette section «div» utiliserait le «texte» ID pour modifier au hasard le numéro de couleur à chaque clic sur la page HTML. Enregistrons et exécutons le code suivant:

Le premier titre changerait sa couleur après chaque milliseconde. En cliquant sur la deuxième section «div» de la page HTML, la boîte modifiera également sa couleur au hasard.

Conclusion

Il s'agit d'utiliser des techniques simples pour modifier au hasard la couleur de certains éléments HTML sans travail acharné. Dans nos exemples, nous avons essayé de couvrir l'utilisation de la fonction «PickColor» pour choisir au hasard une couleur dans un tableau et l'appliquer à l'élément spécifique. Nous avons tenté d'implémenter la fonction setTinterVal () pour modifier instantanément la couleur d'un élément spécifique sans taper quelque part sur l'écran HTML, je.e., Changement automatique des couleurs.