小女新手学习中，这里将会整理和记录小女的学习笔记，如有错误的地方希望各位前辈多多指教，小女在此不甚感激，一定虚心受教。
我的邮箱：lf_radish@163.com
模拟切水果的游戏以达到对JavaScript的一些基本语法操作的练习，采用面向对象的思想此文章中涉及了大部分JavaScript的基础知识，下面我将做详细分析。
Math.random()--随机产生0-1的随机数 document.createElement("div")：创建一个div元素
replace(/[^0-9]/ig, "")：提取字符串中整数
闭包：此概念是JavaScript中重要的概念之一，我浅显的理解闭包的作用就是改变变量的作用域，网上有大多数关于闭包这个概念的解释和说明。http://www.jb51.net/article/24101.htm http://kb.cnblogs.com/page/110782/ setTimeout() 方法与setInterval()用于在指定的毫秒数后调用函数或计算表达式。 提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。 http://www.360doc.com/content/11/0412/17/1007797_109118156.shtml |
toString（16）：本文中是将十进制的数转换为16进制 |
document.body.appendChild(this.div)：在body中添加这个div对象。 |
apply（）方法实现继承机制 |
DOM event对象： Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！ |
1 <body > 2 <form id="form1" runat="server"> 3 <script language="javascript" type="text/javascript"> 4 <!-- 5 function Panel(_width, _height) { 6 this.width = _width; 7 this.height = _height; 8 9 this.randomColor = function () { 10 var r = parseInt(Math.random() * 255).toString(16); 11 var g = parseInt(Math.random() * 255).toString(16); 12 var b = parseInt(Math.random() * 255).toString(16); 13 return "#" + r + g + b; 14 } 15 this.create = function () { 16 this.div = document.createElement("div"); 17 this.div.style.width = this.width + "px"; 18 this.div.style.height = this.height + "px"; 19 this.div.style.backgroundColor = this.randomColor(); 20 document.body.appendChild(this.div); 21 var temp = this; 22 setTimeout(function () { 23 document.body.removeChild(temp.div) 24 }, 3000); 25 } 26 } 27 function LiPanel(_width, _height) { 28 Panel.apply(this, arguments); 29 this.width=_width; 30 this.height = _height; 31 this.parent = document.getElementById("background"); 32 this.create = function (clientX, clientY) { 33 this.div = document.createElement("div"); 34 this.div.style.width = this.width + "px"; 35 this.div.style.height = this.height + "px"; 36 this.div.style.top = clientY + "px"; 37 this.div.style.left = clientX + "px"; 38 this.div.style.position = "absolute"; 39 this.div.style.backgroundColor = this.randomColor(); 40 this.parent.appendChild(this.div); 41 var self = this; 42 setTimeout(function () { 43 self.parent.removeChild(self.div); 44 },100); 45 } 46 47 } 48 49 function Fruit() { 50 Panel.apply(this, arguments); 51 //设置水果的大小 52 this.width = Math.floor(Math.random() * 10 + 20) + "px"; 53 this.height = Math.floor(Math.random() * 10 + 20) + "px"; 54 //获取背景的位置 55 this.obj=document.getElementById("background"); 56 this.backwidth =this.obj .offsetWidth; 57 this.backheight = this.obj.offsetHeight; 58 this.backtop = this.obj.offsetTop; 59 //获取背景的底部位置 60 this.backY = this.obj.style.top.replace(/[^0-9]/ig, "")+this.obj.offsetHeight; 61 //设置水果出现的位置 62 //this.x = Math.floor(Math.random() * (this.offsetwidth.replace(/[^0-9]/ig, "")) + 1) + "px"; 63 this.x = Math.floor(Math.random() * this.backwidth); 64 this.y = Math.floor(this.backtop); 65 66 this.timer = null; 67 68 this.marquee = function () { 69 if (this.y <= this.backY) { 70 this.div.style.top = (this.y++) + "px"; 71 } else { 72 this.destroy(); 73 } 74 } 75 this.create = function () { 76 this.div = document.createElement("div"); 77 this.div.style.width = this.width; 78 this.div.style.height = this.height; 79 this.div.style.left = this.x + "px"; 80 this.div.style.top = this.y + "px"; 81 this.div.style.position = "absolute"; 82 this.div.style.backgroundColor = this.randomColor(); 83 document.getElementById("background").appendChild(this.div); 84 85 var self = this; 86 this.div.onmouseover = function () { 87 self.destroy(); 88 } 89 this.timer = setInterval(function () { 90 self.marquee(); 91 }, 1); 92 } 93 this.destroy = function () { 94 document.getElementById("background").removeChild(this.div); 95 clearInterval(this.timer); 96 delete this; 97 } 98 } 99 document.body.onload = function () { 100 document.getElementById("background").onmousemove = function (event) { 101 new LiPanel(3, 3).create(event.clientX, event.clientY); 102 } 103 setInterval(function () { 104 new Fruit().create(); 105 }, 500); 106 } 107 --> 108 </script> 109 <div id="demo"> 110 <input id="Button1" type="button" value="button" onclick="javascript:new Panel(200,100).create();" /> 111 </div> 112 <div id="background"></div> 113 </form> 114 </body>