首页 > 代码库 > JS_生成随机矩形位置/矩形大小_面向对象_原型+构造函数模式
JS_生成随机矩形位置/矩形大小_面向对象_原型+构造函数模式
使用面向对象的方法进行矩形的随机生成。使用了原型和构造函数模式
随机生成矩形。矩形的位置是随机的，矩形的长宽（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>
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
(感兴趣的粘贴一下代码自行运行看看吧)
<style></style>
以上内容，如有错误请指出，不甚感激。
JS_生成随机矩形位置/矩形大小_面向对象_原型+构造函数模式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。