JS面向物件——列印正方形、圓形
阿新 • • 發佈：2019-01-08
描述：
JS面向物件——列印正方形、圓形
效果：
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> /* * * class * constructor * extends * super(); * super.方法 * static 方法 * * * */ //類名 class Box{ // 建構函式 constructor(_parent,_wh,_color){ this.wh=_wh; this.color=_color; this.boxElem=this.createBox(_parent); } createBox(_parent){ if(this.boxElem)return; let div=document.createElement("div"); div.style.width=div.style.height=this.wh+"px"; div.style.backgroundColor=this.color; div.style.position="absolute"; _parent.appendChild(div); return div; } move(x,y){ this.boxElem.style.left=x+"px"; this.boxElem.style.top=y+"px"; } } class Ball extends Box{ constructor(_parent,_wh,_color){ // super()就是執行繼承的父類的建構函式 super(_parent,_wh,_color) } createBox(_parent){//相當於重寫 加了相應的功能 圓的功能 let elem=super.createBox(_parent); elem.style.borderRadius=this.wh/2+"px"; return elem; } // 類的靜態方法 static getRandomColor(){ let col="#"; for(let i=0;i<6;i++){ col+=Math.floor(Math.random()*16); } return col; } } let box1=new Box(document.body,50,"red"); box1.move(200,200); let ball1=new Ball(document.body,50); ball1.move(500,500); Ball.getRandomColor(); </script> </body> </html>