自己做网站能挣钱吗,南宁本地网站有哪些?,网站如何进行代码优化,伪类网站今天来看看怎样用面对对象来做一个躁动的小球。 首先我们先创建一个对象#xff0c;他的属性包含小球的随机水平、纵向坐标#xff0c;随机宽、高#xff0c;随机颜色#xff0c;以及创建小球的方法。 html: div idwrap/div js:function Boll(… 今天来看看怎样用面对对象来做一个躁动的小球。 首先我们先创建一个对象他的属性包含小球的随机水平、纵向坐标随机宽、高随机颜色以及创建小球的方法。 html: div idwrap/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%;} 转载于:https://www.cnblogs.com/yhyanjin/p/7050470.html
