随机色有两种格式:
效果预览:http://wjf444128852.github.io/DEMOLIST/JS/test/index.html
1、rgb(xxx,xxx,xxx)
2、#xxxxxx
下面实现两种随机的方法
思路:如何让x都是随机的,
1、中的xxx是0-255之间的随机整数,用Math.random()*255取得0-255之间的随机数,
再Math.floor()保留小数点前面的
2、中的x是0123456789abxdef中的随机6个的组合,
这里可以用数组或者字符串处理,这里采用数组,只要从数组里取6次,每次取得数组下标是0-16之间的随机整数即可。
注意(法二中虽然改变的是#XXXX,此时浏览器查看DOM元素的background-color属性值还是rgb格式的,但是JS中赋值是#xxx格式。)
代码如下:
HTML
RandomColor-rgb
RandomColor-#XXXXXX
CSS
*{
box-sizing: border-box;
list-style: none;
border: none;
padding: 0;
margin: 0;
}
p{
text-align: center;
margin: 20px;
}
p a{
font-size: 20px;
font-weight: 300;
color: #e4393c;
text-decoration: none;
padding: 6px 10px;
border: 1px solid currentColor;
}
.bg_color,.bg_two{
width: 100px;
height: 100px;
border: 1px solid #aa00aa;
}
.main,.main ul{
overflow: hidden;
}
.main{
width: 400px;
margin:30px auto;
}
.main ul li{
float: left;
}
JS


