<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
#map{
width:100%;
height:100%;
position:relative;
background-color:#000000;
}
#map .ball{
display: inline-block;
border-radius:50%;
position: absolute;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script>
//获取元素
var map = document.getElementById('map');
//屏幕的宽高
var screenWidth = document.body.offsetWidth;
var screenHeight = document.body.offsetHeight;
//随机数
function random(min,max){
return parseInt(Math.random()*(max - min + 1)+ min);
}
//随机颜色
function randomColor(){
return "rgba("+ random(0,255) +","+ random(0,255) +","+ random(0,255) +","+ (Math.random() +0.1) +")"
}
//循环创建
for(var i =0; i < 1000; i++){
//创建元素
var ball = document.createElement('span');
ball.className = "ball";
var wAndH = random(5,10);
ball.style.width = wAndH + "px";
ball.style.height = wAndH + "px";
ball.style.left = random(0,screenWidth - wAndH) + "px";
ball.style.top = random(0,screenHeight - wAndH) + "px";
ball.style.background = randomColor();
map.appendChild(ball);
}
</script>
</html>