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>
