星星

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