如何用面对对象来做一个躁动的小球？

　　今天来看看怎样用面对对象来做一个躁动的小球。

　　首先我们先创建一个对象，他的属性包含小球的随机水平、纵向坐标，随机宽、高，随机颜色，以及创建小球的方法。

 

html:

<div id="wrap"></div>

js:

function Boll(x,y,w,h,color){// 随机宽高var wh = randFn(5, 40);// 随机颜色var c = 'rgb('+randFn(0, 255)+',' + randFn(0,255)+','+randFn(0, 255)+')';// 随机x坐标 水平位置    document.body.clientWidth 网页可见区域的宽this.x = randFn(0, document.body.clientWidth - 20);// 随机y坐标 纵向位置 document.body.clientHeight 网页可见区域的高this.y = randFn(0, document.body.clientHeight - 20);// 随机颜色this.color = c;// 随机宽高this.w = wh;this.h = wh;// 小球展示出来this.show = function(){//创建小球var bolDiv = document.createElement("div");bolDiv.style.background = this.color;bolDiv.style.left = this.x + "px";bolDiv.style.top = this.y + "px";bolDiv.style.width = this.w + "px";bolDiv.style.height = this.h + "px";// 把创建出来的小球插入到wrap里面var wrap = document.getElementById("wrap");wrap.appendChild(bolDiv);}}

 

之后把小球添加在页面上，设定计时器来让小随机出现。

js: 

//添加小球到页面上var fuc = function(){// 创建小球对象var bol = new Boll();//设置小球相关数据 位置 宽高 并添加
        bol.show()} //间隔性计时器 每隔一秒执行一次fuc函数 即创建小球对像并添加到页面上window.setInterval(fuc,1000)

 

创建小球还是少不了style：

*{margin: 0px;padding: 0px;}html,body{width: 100%;height: 100%;}#wrap{width: 100%;height: 100%;background: black;position: relative;}#wrap div{position: absolute;border-radius: 50%;}