无聊的js(马赛克) 
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document</title>
<style type="text/css">
body,div{
width:100%;
height:100%;
margin:0px;
padding: 0px;
overflow-x:hidden;
overflow-y:hidden;
}
</style>
</head>
<body onload="change()">
<script type="text/javascript">
var clientWidth = document.documentElement.clientWidth;
var clientHeight = document.documentElement.clientHeight;
var Xnum = 200;//每一行的数量
var Ynum = Xnum*clientHeight/clientWidth; //每一列的数量
var client = clientWidth/Xnum;
var height = clientHeight/Ynum
console.log(clientWidth);    console.log(clientHeight);
console.log(Xnum);    console.log(Ynum);
console.log(client);    console.log(height);
function randomVal(val){
    return Math.floor(Math.random()*(val + 1));
}
function randomColor(){
    return 'rgb(' + randomVal(255) + ',' + randomVal(255) + ',' + randomVal(255) + ')';
}
function change(){
    document.body.innerHTML="";
    //document.body.style.backgroundColor=randomColor();
    for (var int = 0; int < Xnum*Ynum; int++) {
        createDiv();
    }
    window.setTimeout(change,500);
}
function createDiv(){
    var oDiv=document.createElement("div");  
    //oDiv.style.border="1px solid black";  
    //oDiv.style.width="500px";  
    //oDiv.style.height="300px"; 
    //Odiv.id="box";                            //创建div的id为box
    //Odiv.className="Box"; 
    //text-align:center;line-height:220px";    //创建div的css样式
    //oDiv.innerText=i;
    oDiv.style.cssText="width:"+client+"px;height:"+height+"px;float:left;background-color:"+randomColor();
    document.body.appendChild(oDiv);  
}
</script>
</body>
</html>

 posted on 2017-10-09 09:45  布诺  阅读(249)  评论(0)  编辑  收藏  举报