JS_生成随机矩形位置/矩形大小_面向对象_原型+构造函数模式
使用面向对象的方法进行矩形的随机生成。使用了原型和构造函数模式
随机生成矩形。矩形的位置是随机的,矩形的长宽(100-200)也是随机的。
贴上代码:
html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
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
(感兴趣的粘贴一下代码自行运行看看吧)
以上内容,如有错误请指出,不甚感激。