今天來看看怎樣用面對對象來做一個躁動的小球。

　　首先我們先創建一個對象，他的屬性包含小球的隨機水平、縱向坐標，隨機寬、高，隨機顏色，以及創建小球的方法。

?

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%;}

?

?

轉載于:https://www.cnblogs.com/yhyanjin/p/7050470.html

總結

以上是生活随笔為你收集整理的如何用面对对象来做一个躁动的小球？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。