面向对象方法随机生成不同位置、不同颜色、不同大小的圆形(默认每秒)

css样式

   *{
       margin: 0;
       padding: 0;
   }
   #box{
        position: relative;
        box-sizing: border-box;
    }

html

<div id="box"style="width:1500px;height:650px;border:2px solid gold"></div>

js

 // 创造一个div节点
 function divBox(){
    //  随机宽高
     var wh=parseInt(Math.random()*(100-1+1)+1);
     var top=parseInt(Math.random()*(600-wh+1));
     var left=parseInt(Math.random()*(1400-wh+1));
     var color=Math.floor(Math.random()*16777216).toString(16);
   function Mk(){
       this.divDom=document.createElement("div")
   }
//    给divDom添加一个css样式
    Mk.prototype.css=function(styObj){
        for(var key in styObj){
          this.divDom.style[key]=styObj[key]
        }
         return this
    }
    // 将divDom添加到 指定元素  内部末尾
    Mk.prototype.append=function(id){
        var box=document.getElementById(id);
        box.appendChild(this.divDom);
        return this
    }
    var div1=new Mk();
        div1.css({
            "width":`${wh}px`,
            "height":`${wh}px`,
            "background":`#${color}`,
            "border-radius":"50%",
            "position":"absolute",
            "top":`${top}px`,
            "left":`${left}px`
        }).append("box")
}
setInterval(function(){
     divBox()
},1000)