JS_生成隨機矩形位置/矩形大小_面向對象_原型+構造函數模式

使用面向對象的方法進行矩形的隨機生成。使用了原型和構造函數模式

隨機生成矩形。矩形的位置是隨機的，矩形的長寬（100-200）也是隨機的。

貼上代碼：

html

<div class="content" id="content">
        <div class="controls">
            <label for="rec_num">請輸入您要自動生成的矩形數量:</label>
            <input type="text" id="rec_num" class="number">
            <br>
            <input type="button" id="makeRec" value="生成矩形" class="btn createBtn">
            <input type="button" id="clearRec" value="清除畫布" class="btn clearBtn">
        </div>
        <div id="rec_place"></div>
    </div>

js

<script>
window.onload=function(){
    document.getElementById("content").style.height = document.documentElement.clientHeight+"px";
    document.getElementById("rec_place").style.height = document.documentElement.clientHeight-85+"px";
    var makeRec = document.getElementById("makeRec");
    var clearRec = document.getElementById("clearRec");
    var rec_num = document.getElementById("rec_num");
    var rec_place = document.getElementById("rec_place");

    var arr = new Array();

    //點擊生成按鈕
    makeRec.onclick=function(){
        var num = rec_num.value;
        if(parseInt(num)!=num){
            alert("請輸入整數！")
        }
        else if(parseInt(num)<=0){
            alert("請輸入大於0的整數！")
        }
        else{
            for(var i=0;i<num;i++){
                var rec = new Rectangle(i,rec_place);
                rec.createRec();
                arr.push(rec);
            }
        }
    }

    //點擊清除畫布
    clearRec.onclick=function(){
        var num = rec_place.getElementsByTagName("div").length;
        for(var i=0;i<num;i++){
            arr[0].ruinRec();
            arr.shift();
        }
    }
}

//var colors = ["red","blue","green","yellow","black"];

function Rectangle(index,rec_place){
    this.index = index;
    this.rec_height = Math.floor(Math.random()*101+100);
    this.rec_width = Math.floor(Math.random()*101+100);
    
    //this.rec_color = colors[Math.floor(Math.random()*5)];
    this.rec_color = "rgb("+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+","+Math.floor(Math.random()*256)+")";

    this.rec_left =    Math.floor(Math.random()*(rec_place.offsetWidth-this.rec_width-1)+2);
    this.rec_top = Math.floor(Math.random()*(rec_place.offsetHeight-this.rec_height)+87);
    this.myRec = null;

    //方法一，構造函數
    // this.createRec =function(){
    //     this.myRec = document.createElement("div");
    //     this.myRec.className = "mydiv";
    //     this.myRec.innerHTML = "我是矩形"+(this.index+1);

    //     this.myRec.style.height = this.rec_height+"px";
    //     this.myRec.style.width = this.rec_width+"px";
    //     this.myRec.style.border = "3px solid "+this.rec_color;
    //     this.myRec.style.left = this.rec_left+"px";
    //     this.myRec.style.top =this.rec_top+"px";

    //     rec_place.appendChild(this.myRec);
    // }

    // this.ruinRec = function(){
    //     rec_place.removeChild(this.myRec);
    //}

}

//原型+構造函數：讓函數共用
Rectangle.prototype = {
    createRec:function(){
        this.myRec = document.createElement("div");
        this.myRec.className = "mydiv";
        this.myRec.innerHTML = "我是矩形"+(this.index+1);

        this.myRec.style.height = this.rec_height+"px";
        this.myRec.style.width = this.rec_width+"px";
        this.myRec.style.border = "3px solid "+this.rec_color;
        this.myRec.style.left = this.rec_left+"px";
        this.myRec.style.top =this.rec_top+"px";

        rec_place.appendChild(this.myRec);
    },
    ruinRec:function(){
        rec_place.removeChild(this.myRec);
    }
}
</script>

 PS:效果出不來，我也不懂為什么T T

(感興趣的粘貼一下代碼自行運行看看吧)

請輸入您要自動生成的矩形數量:

 

 

以上內容，如有錯誤請指出，不甚感激。