js代码实现随机颜色的小方块
下面一段代码就是用js实现的随机颜色的小方块，不多说了代码很简单，直接上代码了。
/**/js注释已删
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-">
<metacharset="utf-">
<title>koringz</title>
<linkrel="stylesheet"href="css/demo.css">
</head>
<body>
<divclass="container">
<divclass="main">
<divclass="colorful"></div>
</div>
</div>
</body>
</html>
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
html{
font-size:px;
-webkit-tap-highlight-color:transparent;
}
body{
margin:;
padding:;
font-family:"HelveticaNeue",Helvetica,Arial,sans-serif;
font-size:px;
line-height:.;
color:#;
background-color:rgba(,,,.);
}
.container{
overflow:visible;
}
.main{
position:relative;
width:%;
height:px;
margin:auto;
}
.colorful{
overflow:visible;
width:%;
height:%;
}
.colorful>a{
float:left;
display:block;
width:px;
height:px;
zoom:;
}
.colorful>a:hover{
-webkit-animation:infinitesease-in-outstart-roll;
-moz-animation:infinitesease-in-outstart-roll;
animation:infinitesease-in-outstart-roll;
}
@-webkit-keyframesstart-roll{
%{
-webkit-transform:rotate(deg);/*chrome*/
-moz-transform:rotate(deg);/*火狐*/
-ms-transform:rotate(deg);/*IE*/
transform:rotate(deg);
-webkit-transition:opacity.slinear;
transition:opacity.slinear;
opacity:.;
filter:alpha(opacity=);
zoom:;
}
%{
-webkit-transform:rotate(deg);/*chrome*/
-moz-transform:rotate(deg);/*火狐*/
-ms-transform:rotate(deg);/*IE*/
transform:rotate(deg);
-webkit-transition:opacityslinear;
transition:opacityslinear;
opacity:;
filter:alpha(opacity=);
zoom:;
}
%{
-webkit-transform:rotate(deg);/*chrome*/
-moz-transform:rotate(deg);/*火狐*/
-ms-transform:rotate(deg);/*IE*/
transform:rotate(deg);
-webkit-transition:opacity.slinear;
transition:opacity.slinear;
opacity:.;
filter:alpha(opacity=);
zoom:;
}
}
@-moz-keyframesstart-roll{
%{
-webkit-transform:rotate(deg);/*chrome*/
-moz-transform:rotate(deg);/*火狐*/
-ms-transform:rotate(deg);/*IE*/
transform:rotate(deg);
-webkit-transition:opacity.slinear;
transition:opacity.slinear;
opacity:.;
filter:alpha(opacity=);
}
%{
-webkit-transform:rotate(deg);/*chrome*/
-moz-transform:rotate(deg);/*火狐*/
-ms-transform:rotate(deg);/*IE*/
transform:rotate(deg);
-webkit-transition:opacityslinear;
transition:opacityslinear;
opacity:.;
filter:alpha(opacity=);
}
%{
-webkit-transform:rotate(deg);/*chrome*/
-moz-transform:rotate(deg);/*火狐*/
-ms-transform:rotate(deg);/*IE*/
transform:rotate(deg);
-webkit-transition:opacity.slinear;
transition:opacity.slinear;
opacity:.;
filter:alpha(opacity=);
}
}
@keyframesstart-roll{
%{
-webkit-transform:rotate(deg);/*chrome*/
-moz-transform:rotate(deg);/*火狐*/
-ms-transform:rotate(deg);/*IE*/
transform:rotate(deg);
-webkit-transition:opacity.slinear;
transition:opacity.slinear;
opacity:.;
filter:alpha(opacity=);
}
%{
-webkit-transform:rotate(deg);/*chrome*/
-moz-transform:rotate(deg);/*火狐*/
-ms-transform:rotate(deg);/*IE*/
transform:rotate(deg);
-webkit-transition:opacityslinear;
transition:opacityslinear;
opacity:.;
filter:alpha(opacity=);
}
%{
-webkit-transform:rotate(deg);/*chrome*/
-moz-transform:rotate(deg);/*火狐*/
-ms-transform:rotate(deg);/*IE*/
transform:rotate(deg);
-webkit-transition:opacity.slinear;
transition:opacity.slinear;
opacity:.;
filter:alpha(opacity=);
}
}
(function(window){
vardocument=window.document;
functionon(elem,evtnm,eventhd){
varonevtnm='on'+evtnm;
elem[onevtnm]=eventhd;
}
functiongrc(){
varval=[],i=;
while(++i<=){
val.push(Math.floor(Math.random()*));
}
return'rgb('+val.join()+')';
}
functionfbc(){
varel=document.querySelectorAll('.colorful')[],
total=Math.floor(el.offsetWidth/)*Math.floor(el.offsetHeight/),
df=document.createDocumentFragment(),
a;
while(total-->){
a=document.createElement('a');
a.style.backgroundColor=grc();
df.appendChild(a);
}
el.appendChild(df);
}
on(window,'load',function(){
fbc();
});
})(window)
以上代码就是用js实现随机颜色小方块的全部内容，需要的朋友可以来参考下。