Los colores aleatorios están disponibles en dos formatos:
Vista previa del efecto: http://wjf444128852.github.io/demolist/js/test/index.html
1. RGB (xxx, xxx, xxx)
2. #XXXXXX
Se implementan los siguientes dos métodos aleatorios
Idea: cómo hacer X al azar
1. El xxx en él es un entero aleatorio entre 0-255. Use Math.random ()*255 para obtener un número aleatorio entre 0-255.
Entonces Math.floor () mantiene el punto decimal antes de él
2. La x en ella es una combinación aleatoria de 6 en 0123456789ABXDEF.
Aquí puede usar una matriz o una cadena para procesarla. Aquí usas una matriz. Simplemente tome 6 veces desde la matriz y obtenga el subíndice de matriz es un entero aleatorio entre 0 y 16 cada vez.
Nota (aunque el cambio en el método 2 es #xxxx, el navegador verifica el valor de atributo de color de fondo del elemento DOM en este caso, pero la asignación en JS está en formato #XXX).
El código es el siguiente:
Html
<body> <div> <p> <a href = "javascript :;" id = "Btn-One"> RandomColor-rgb </a> </p> <ul> <li> <Viv> </div> </li> <li> <viemon <li> <iv> </div> </li> <li> <div> </div> </li> <li> <div> </div> </li> <li> <div> </div> </li> <li> <div> </div> </li> <li> <div> </div> </li> <li> <div> </iv> </li> <iv> </div> </divs> </div> </li> <li> <div> </div> </li> <iv> </div> </liV> <li> <div> </div> </li> </ul> </div> </body>
CSS
*{box-singing: border-box; Estilo de lista: Ninguno; borde: ninguno; relleno: 0; margen: 0; } P {text-align: Center; margen: 20px; } pa {font-size: 20px; Font-peso: 300; Color: #E4393C; Decoración de texto: ninguna; relleno: 6px 10px; borde: 1px Current CurrentColor; } .bg_color, .bg_two {width: 100px; Altura: 100px; borde: 1px sólido #aa00aa; } .main, .Main ul {desbordamiento: oculto; } .main {ancho: 400px; Margen: 30px Auto; } .main ul li {float: izquierda; }Js
<script> (function () {// 1. Función de color aleatorio -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>Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.