Zufällige Farben sind in zwei Formaten erhältlich:
Effektvorschau: http://wjf444128852.github.io/demolist/js/test/index.html
1. RGB (xxx, xxx, xxx)
2. #xxxxxx
Die folgenden zwei zufälligen Methoden werden implementiert
Idee: Wie man x zufällig macht
1. Das XXX darin ist eine zufällige Ganzzahl zwischen 0-255. Verwenden Sie Math.random ()*255, um eine Zufallszahl zwischen 0-255 zu erhalten.
Dann hält Math.floor () den Dezimalpunkt davor
2. Das X ist eine zufällige Kombination von 6 in 0123456789abxdef.
Hier können Sie ein Array oder eine Zeichenfolge verwenden, um es zu verarbeiten. Hier verwenden Sie ein Array. Nehmen Sie sich nur 6 Mal aus dem Array und erhalten Sie jedes Mal eine zufällige Ganzzahl zwischen 0 und 16.
Hinweis (Obwohl die Änderung in Methode 2 #xxxx ist, überprüft der Browser in diesem Fall den Attributwert des Hintergrundfarbens des DOM-Elements, aber die Zuordnung in JS befindet sich im #xxx-Format.)
Der Code ist wie folgt:
Html
<body> <div> <p> <a href = "JavaScript:;" id="btn-one">RandomColor-rgb</a></p> <ul> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li><div></div></li> <li> <div> </div> </li> </ul> </div> </body>
CSS
*{Boxgröße: Border-Box; Listenstil: Keine; Grenze: Keine; Polsterung: 0; Rand: 0; } p {text-align: center; Rand: 20px; } pa {Schriftgröße: 20px; Schriftgewicht: 300; Farbe: #e4393c; Textdekoration: Keine; Polsterung: 6px 10px; Grenze: 1PX Festkreislauf; } .bg_color, .bg_two {width: 100px; Höhe: 100px; Grenze: 1PX Solid #aa00aa; } .main, .main ul {Überlauf: versteckt; } .main {width: 400px; Rand: 30px Auto; } .main ul li {float: links; }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 <divsgto; ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']; Math.floor (math.random ()*16); }) () </script>Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.