Les couleurs aléatoires sont disponibles en deux formats:
Aperçu de l'effet: http://wjf444128852.github.io/demolist/js/test/index.html
1. RVB (xxx, xxx, xxx)
2. #Xxxxxx
Les deux méthodes aléatoires suivantes sont implémentées
Idée: comment rendre x aléatoire
1. Le XXX est un entier aléatoire entre 0-255. Utilisez Math.Random () * 255 pour obtenir un nombre aléatoire entre 0-255.
Alors math.floor () garde le point décimal avant lui
2. Le x dans elle est une combinaison aléatoire de 6 dans 0123456789AbxDef.
Ici, vous pouvez utiliser un tableau ou une chaîne pour le traiter. Ici, vous utilisez un tableau. Prenez simplement 6 fois le tableau et obtenez l'indice du tableau est un entier aléatoire entre 0 et 16 à chaque fois.
Remarque (bien que le changement dans la méthode 2 soit #xxxx, le navigateur vérifie la valeur d'attribut de couleur background de l'élément DOM dans ce cas, mais l'affectation dans JS est au format #xxx.)
Le code est le suivant:
Html
<body> <div> <p> <a href = "javascript:;" id = "btn-one"> randomcolor-rgb </a> </p> <ul> <li> <div> </ div> </li> <li> <div> </ div> </li> <li> <v> </ div> </li> <li> <div> </ div> </li> <li> <v> </div> </li> <li> <li> <div> </ div> </li> <li> <div> </ div> </li> <li> <div> </ div> </li> <li> <div> </ div> </li> <li> <v> </ div> </li> <li> <div> </ div> </li> <li> <v> </v> </li> <li> <li> <div> </div> </li> </ul> </div> </body>
CSS
* {Box-Size: Border-Box; Style de liste: aucun; Border: aucun; rembourrage: 0; marge: 0; } P {Text-Align: Centre; marge: 20px; } pa {Font-Size: 20px; Police-poids: 300; Couleur: # E4393C; Décoration du texte: aucune; rembourrage: 6px 10px; Border: 1px Current SolidColor; } .bg_color, .bg_two {width: 100px; hauteur: 100px; Border: 1px solide # AA00AA; } .main, .main ul {overflow: Hidden; } .main {width: 400px; marge: 30px automatique; } .main ul li {float: gauche; }Js
<script> (function(){ //1. Random color function -rgb function getRandomColor(){ var rgb='rgb('+Math.floor(Math.random()*255)+',' +Math.floor(Math.random()*255)+',' +Math.floor(Math.random()*255)+',' + Math.floor (Math.Random () * 255) + ')'; i = 0; i <divs.length; i ++) {divs [i] .style.backgroundcolor = getrandomcolor ();}}; [0 ',' 1 ',' 2 ',' 3 ',' 4 ',' 5 ',' 6 ',' 7 ',' 8 ',' 9 ',' a ',' b ',' c ',' d ',' e ',' f ']; Math.floor (Math.Random () * 16); }) () </script>Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.