——————————————————————————————————————
——————————————————————————————————————
——————————————————————————————————————
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单个div随机</title> <style> div{position: absolute;} </style> </head> <body> <div id="div0"></div> <script> init(); function init() { /*div0.放在前面就是点div块的时候变化 替换document*/ document.addEventListener("click",clickHandler); //不点不执行 所以执行了 不影响 divRandom();//就是随机一次 } //点击屏幕事件 function clickHandler(e) { e=e || window.event; divRandom(); } //克隆对象属性 function cloneObj(biaoji,yuan){ for (var key in yuan){ biaoji[key]=yuan[key]; } } //div大小&位置 随机的变化函数 function divPositionSize() { var w=Math.random()*document.documentElement.clientWidth; var h=Math.random()*document.documentElement.clientHeight; var x=Math.random()*(document.documentElement.clientWidth-w); var y=Math.random()*(document.documentElement.clientHeight-h); return {left:x,top:y,width:w,height:h}; } //背景颜色随机 function divColor() { var col="#";//这个字符串第一位为# 颜色的格式 for(var i=0;i<6;i++){ col+=parseInt(Math.random()*16).toString(16); //rondom*16后的随机值即为0-1*16==0-16; toString(16)为转化为16进制 } return col;//最后返回一个七位的值 格式即为#nnnnnn 颜色的格式 } function divRandom() { var divs=document.getElementById("div0");//设置监听事件 var X_div=divPositionSize();//X_div作为位置大小的数据暂存 cloneObj(divs.style,{ left:X_div.left+"px", top:X_div.top+"px", width:X_div.width+"px", height:X_div.height+"px", backgroundColor:divColor() }) } </script> </body> </html>