Js实现随机点击单个div颜色位置大小随机在浏览器页面出现
效果:
——————————————————————————————————————
——————————————————————————————————————
——————————————————————————————————————
代码:
<!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>