<!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=""+client+"px;height:"+height+"px;float:left;background-color:"+randomColor(); document.body.appendChild(oDiv); } </script> </body> </html>
