JS_生成随机矩形位置/矩形大小_面向对象_原型+构造函数模式

Posted 2020-08-04 FIONA-SUN

使用面向对象的方法进行矩形的随机生成。使用了原型和构造函数模式 随机生成矩形。矩形的位置是随机的，矩形的长宽（100-200）也是随机的。

使用面向对象的方法进行矩形的随机生成。使用了原型和构造函数模式

随机生成矩形。矩形的位置是随机的，矩形的长宽（100-200）也是随机的。

贴上代码：

html

 1 <div class="content" id="content">
 2         <div class="controls">
 3             <label for="rec_num">请输入您要自动生成的矩形数量:</label>
 4             <input type="text" id="rec_num" class="number">
 5             <br>
 6             <input type="button" id="makeRec" value="生成矩形" class="btn createBtn">
 7             <input type="button" id="clearRec" value="清除画布" class="btn clearBtn">
 8         </div>
 9         <div id="rec_place"></div>
10     </div>

View Code

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

(感兴趣的粘贴一下代码自行运行看看吧)

请输入您要自动生成的矩形数量:

 

 

以上内容，如有错误请指出，不甚感激。