Cores aleatórias estão disponíveis em dois formatos:
Visualização de efeito: http://wjf444128852.github.io/demolist/js/test/index.html
1. RGB (xxx, xxx, xxx)
2. #Xxxxxx
Os dois métodos aleatórios a seguir são implementados
Ideia: como fazer x aleatório
1. O xxx é um número inteiro aleatório entre 0-255. Use Math.Random ()*255 para obter um número aleatório entre 0-255.
Então Math.floor () mantém o ponto decimal antes dele
2. O x é uma combinação aleatória de 6 em 0123456789ABXDEF.
Aqui você pode usar uma matriz ou uma string para processá -la. Aqui você usa uma matriz. Basta tirar 6 vezes a partir da matriz e obter o subscrito da matriz é um número inteiro aleatório entre 0 e 16 de cada vez.
Nota (embora a alteração no método 2 seja #xxxx, o navegador verifica o valor do atributo em segundo plano do elemento DOM neste caso, mas a atribuição no JS está no formato #XXX.)
O código é o seguinte:
Html
<body> <div> <p> <a href = "javascript :;" id = "btn-one"> aleatomcolor-rgb </a> </p> <ul> <li> <div> </div> </li> <li> <div> </div> </li> <li> <div> <//> </li> <li> <div> </div> </li> <li> <div> </div> </li> <li> <div> </div> </li> <li> <div> </div> </li> <li> <div> <//</li> <li> <li> <div> <li> <li> </> </> </li> <li> <div> </div> </li> </ul> </div> </body>
CSS
*{tamanho da caixa: caixa de fronteira; estilo de lista: nenhum; fronteira: nenhuma; preenchimento: 0; margem: 0; } p {text-align: Center; margem: 20px; } pa {font-size: 20px; Peso da fonte: 300; Cor: #e4393C; Decoração de texto: Nenhum; preenchimento: 6px 10px; borda: 1px Solid CurrentColor; } .bg_color, .bg_two {width: 100px; Altura: 100px; fronteira: 1px Solid #AA00AA; } .Main, .Main ul {Overflow: Hidden; } .Main {Width: 400px; margem: 30px automático; } .Main ul li {float: esquerda; }JS
<Cript> (function () {// 1. Função de cor aleatória -rgb função getRandomcolor () {var rgb = 'rgb ('+math.floor (math.random ()*255)+',' Math.Rath.floor (Math.random ()*255)+','+Math.floor +MATH.FLOOR (MATH.RANDOM ()*255) +')'; I = 0; I <Divs.Length; ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C' Math.Floor (Math.Random ()*16); }) () </script>O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.