<!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>
