1 <!doctype html> 2 3 <html lang="en"> 4 5 <head> 6 7 <meta charset="UTF-8"> 8 9 <title>Document</title> 10 11 <style type="text/css"> 12 13 *{ 14 15 margin: 0px; 16 17 padding: 0px; 18 19 } 20 21 html,body{ 22 23 height: 100%; 24 25 width: 100%; 26 27 overflow: hidden; /*隐藏滚动条，消除小球碰到滚动条出现的窗口闪动*/ 28 29 } 30 31 .content{ 32 33 width: 100%; 34 35 height: 100%; 36 37 position: relative; 38 39 background: black; 40 41 42 43 } 44 45 .ball{ 46 47 position: absolute; 48 49 border-radius: 50%; 50 51 } 52 53 </style> 54 55 </head> 56 57 <body> 58 59 <div class="content" id="con"></div> 60 61 <script type="text/javascript"> 62 63 //定义随机函数 64 65 function RandomNum(num1,num2){ 66 67 return Math.floor(Math.random()*(num2-num1+1)+num1); 68 69 70 71 } 72 73 //构造小球函数 74 75 function Ball(){ 76 77 this.ball=document.createElement("div"); 78 79 var randomNum=RandomNum(20,50); 80 81 this.width=randomNum 82 83 this.height=randomNum 84 85 //如果元素有id名，我们可以直接使用，不用document.get....获取 86 87 this.left=RandomNum(0,con.offsetWidth-randomNum); 88 89 this.top=RandomNum(0,con.offsetHeight-randomNum); 90 91 this.backgroundColor="rgba("+RandomNum(0,255)+","+RandomNum(0,255)+","+RandomNum(0,255)+","+Math.random()+")";//随机颜色 92 93 this.tempX=this.left; 94 95 this.tempY=this.top; 96 97 this.speedx=RandomNum(10,20)-15.5;//后面的小数是保证随机产生的方向有正有负 98 99 this.speedy=RandomNum(10,20)-15.5; 100 101 } 102 103 //画小球的方法 104 105 Ball.prototype.draw=function(){ 106 107 this.ball.style.width=this.width+"px"; 108 109 this.ball.style.height=this.height+"px"; 110 111 this.ball.className="ball"; 112 113 this.ball.style.left=this.tempX+"px"; 114 115 this.ball.style.top=this.tempY+"px"; 116 117 this.ball.style.backgroundColor=this.backgroundColor; 118 119 con.appendChild(this.ball); 120 121 } 122 123 124 125 126 127 //运动函数 128 129 Ball.prototype.move=function(){ 130 131 132 133 this.tempX=this.tempX+this.speedx; 134 135 this.tempY=this.tempY+this.speedy; 136 137 // 判断临界值 138 139 if(this.tempX+this.width>=document.body.clientWidth||this.tempX<=0){ 140 141 this.speedx = -this.speedx;//改变方向 142 143 } 144 145 if(this.tempY+this.height>=document.body.clientHeight||this.tempY<=0) { 146 147 this.speedy = -this.speedy; 148 149 } 150 151 this.draw(); 152 153 } 154 155 //产生小球 156 157 var balls=[]; 158 159 for(var i=0;i<100;i++){ 160 161 var ball=new Ball(); 162 163 balls.push(ball);//生成的小球对象放进数组 164 165 166 167 } 168 169 function start(){ 170 171 for(var i = 0;i < balls.length;i++) { 172 173 balls[i].move(); 174 175 } 176 177 } 178 179 window.onload=function(){ 180 181 setInterval(start,10);//设置定时器 182 183 } 184 185 186 187 </script> 188 189 </body> 190 191 </html>