js五彩小球 

  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>

 

posted @ 2019-07-08 15:31  爱笑的小宇宙  阅读(256)  评论(0)    收藏  举报