我女儿说要看雪，于是我默默的拿起了键盘，下雪咯，程序员就是可以为所欲为！

电玩女神 2021-09-07 05:59 209阅读 0赞

### 效果图： ###

![20210104220057914.gif][]

### 初始化雪花 ###

this.box.style.width=screenWidth+'px';
    			this.box.style.height=screenHeight+'px';
    			var fragment = document.createDocumentFragment();
    			for(var i=0;i<this.size;i++){//创建好雪花
    				var left = this.getRandomThings('left');
    				var top = this.getRandomThings('top');
    				var snowSize=this.getRandomThings('size');
    				var snow = document.createElement("div");
    				snow.style.cssText='position:absolute;color:#FFFFFF;';
    				snow.style['font-size']=snowSize+'px';
    				snow.style.left=left+'px';
    				snow.style.top=top+'px';
    				snow.innerHTML='&#10052';
    				this.item.push(snow);
    				fragment.appendChild(snow);
    			}
    			box.appendChild(fragment);

var left = this.getRandomThings('left');  设置left为随机，这样就可以横向分布在空中了。

var top = this.getRandomThings('top'); 设置top，都默认在顶上，隐藏了起来。

### 让雪花动起来 ###

//用setInterval 定时器让雪动起来
    
    //每次执行获得随机移动的X y增量并添加到x和y上
    	increTop = that.getRandomThings('incre');
    	increLeft = that.getRandomThings('increLeft');
    	x += increLeft;
    	y += increTop;
    	//设定left top让雪动起来
    	s.style.left=x+'px';
    	s.style.top=y+'px';

### 当雪花遇到边界（最下面、最右边），就重新设定参数回到最顶上，循环往下飘 ###

//超过右边或者底部重新开始
    					if(y>(screenHeight-5) || x>(screenWidth-30)){
    						//重新回到天上开始往下
    						increTop = that.getRandomThings('incre');
    						increLeft = that.getRandomThings('increLeft');
    						
    						//重新随机属性
    						var left = that.getRandomThings('left');
    						var top = that.getRandomThings('top');
    						var snowSize=that.getRandomThings('size');
    						s.style.left=left+'px';
    						s.style.top=top+'px';
    						s.style['font-size']=snowSize+'px';
    						y=top;
    						x=left;
    						n=0;
    						
    						return ;
    					}

### 现在可以看到雪花了，但是雪花会一股脑的落下，不好看，所以设定一个参数来控制，一次落下多少个。 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

当雪花的数量可以整除downSize的时候，就加一秒的时间，再执行，就可以一秒下一部分雪花，当然时间还可以再修改，这个downSize可以在初始化的时候传入。

### 运行后发现左边会没有雪，因为是往右飘的，那设置X为负的再往右飘就可以了 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1][]

### 飘雪 ###

现在是匀速下落的，需要更改一下速度，让它一会快一会慢就能感觉到是飘着的，每次执行下落动画的时候，判断随机数是否大于0.5，大于就加一点，小于就减一点，用一个系数控制就好。

![2021010421422349.png][]

### 完整代码 ###

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">
            <style>
            *{
            	margin:0;padding:0;
            }
            #box{padding:3px;position:absolute;background:skyblue;}
            </style>
            </head>
            <body>
            	<div id="box">
            		
           		</div>
            </body>
            
    <script>
    	(function(){
    		var screenWidth = window.screen.availWidth-20;//设定天空宽度
    		var screenHeight = 550;//设定天空高度
    		var speed=20;
    		function Snow(size,downSize){
    			this.box=document.getElementById("box");
    			this.size=size;
    			this.downSize=downSize||10;
    			this.item=[];
    			this.init();
    			this.start();
    		}
    		// 获取相关随机数据的方法
    		Snow.prototype.getRandomThings=function(type){
    			var res;
    			if(type=='left'){//初始的left
    				res = Math.round(Math.random()*(screenWidth-30-10))+10;
    				Math.random()>0.8 ? (res =-res):null;//这句是为了让左边有雪，因为雪是往右飘的，把left设置为负值，就会有的出现在左侧
    			}else if(type=='top'){//初始的top
    				res = -(Math.round(Math.random()*(50-40))+40);
    			}else if(type=='incre'){//向下的速度
    				res = Math.random()*(3-1)+1;
    			}else if(type=='increLeft'){//向右的速度
    				res = Math.random()*(0.8-0.5)+0.5;
    			}else{//雪花的大小
    				res = Math.round(Math.random()*(30-10))+10;
    			}
    			return res;
    		}
    		
    		Snow.prototype.init=function(){
    			this.box.style.width=screenWidth+'px';
    			this.box.style.height=screenHeight+'px';
    			var fragment = document.createDocumentFragment();
    			for(var i=0;i<this.size;i++){//创建好雪花
    				var left = this.getRandomThings('left');
    				var top = this.getRandomThings('top');
    				var snowSize=this.getRandomThings('size');
    				var snow = document.createElement("div");
    				snow.style.cssText='position:absolute;color:#FFFFFF;';
    				snow.style['font-size']=snowSize+'px';
    				snow.style.left=left+'px';
    				snow.style.top=top+'px';
    				snow.innerHTML='&#10052';
    				this.item.push(snow);
    				fragment.appendChild(snow);
    			}
    			box.appendChild(fragment);
    		}
    			
    		Snow.prototype.start=function(){
    			var that=this;
    			var num=0;
    			for(var i=0;i<this.size;i++){
    				var snow = this.item[i];
    				if((i+1)%this.downSize==0){//这样处理的话，就可以指定每次落下多少雪花，不然刚开始是一股脑的下来
    					num++;
    				}
    				(function(s,n){//用闭包的方式
    					setTimeout(function(){
    						that.doStart(s);
    					},1000*n)
    				})(snow,num)
    				
    			}
    		}	
    		//针对每个雪花的定时处理
    		Snow.prototype.doStart=function(snow){
    			var that=this;
    			(function(s){
    				var increTop = that.getRandomThings('incre');
    				var increLeft = that.getRandomThings('increLeft');
    				var x=parseInt(getStyle(s, 'left')),y=parseInt(getStyle(s, 'top'));
    				
    				if(s.timmer) return ;
    				s.timmer=setInterval(function(){
    					//超过右边或者底部重新开始
    					if(y>(screenHeight-5) || x>(screenWidth-30)){
    						//重新回到天上开始往下
    						increTop = that.getRandomThings('incre');
    						increLeft = that.getRandomThings('increLeft');
    						
    						//重新随机属性
    						var left = that.getRandomThings('left');
    						var top = that.getRandomThings('top');
    						var snowSize=that.getRandomThings('size');
    						s.style.left=left+'px';
    						s.style.top=top+'px';
    						s.style['font-size']=snowSize+'px';
    						y=top;
    						x=left;
    						n=0;
    						
    						return ;
    					}
    					
    					//加上系数，当随大于0.5 速度加快，小于0.5 速度减慢，看起来飘的感觉
    					x += Math.random()>0.5?increLeft*1.1:increLeft*0.9;
    					y += Math.random()>0.5?increTop*1.1:increTop*0.9;
    					
    					//设定left top让雪动起来
    					s.style.left=x+'px';
    					s.style.top=y+'px';
    				},speed);
    			})(snow)
    		}
    		
    			//获取属性值
    		function getStyle(obj, prop) {
    			var prevComputedStyle = document.defaultView ? document.defaultView.getComputedStyle( obj, null ) : obj.currentStyle;
    			return prevComputedStyle[prop];
    		}
    			
    		new Snow(300,30);
    	})()
     
    </script>
    </html>

### 欢迎指正！记得三连哦！ ###

### **关注下方公众号，有更多资料、实例代码、面试技巧奉上！** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2][]

### ★** 更多源码** ###

** [♥ 基于canvas的手风琴特效（附源码）♥][_canvas]**

**[♥ 抖音很火的华为太空人表盘（附源码）♥][Link 1]**

**[♥ 基于JavaScript页面动态验证码（附源码）♥][_JavaScript]**

**[♥ 基于JavaScript的拖动滑块拼图验证（附源码）♥][_JavaScript 1]**

**[♥ 基于JavaScript的幸运大转盘（附源码）♥][_JavaScript 2]**

**[♥ 抖音很火的罗盘时钟（附源码）♥][Link 2]**

**[♥ 基于JavaScript的俄罗斯方块小游戏（附源码）♥][_JavaScript 3]**

**[♥ 基于JavaScript的贪吃蛇游戏（附源码）♥][_JavaScript 4]**

**[♥ 基于JavaScript的拼图游戏（附源码）♥][_JavaScript 5]**

**[♥ 用JavaScript给女儿做的烟花特效（附源码）♥][_JavaScript 6]**

**[♥ 老父亲给女儿做的下雪特效，满足女儿看雪的愿望（附源码）♥][Link 3]**

**[♥ 雷达扫描特效（附源码）♥][Link 4]**

**[♥ 香港黄金配角吴孟达去世，80后程序员以轮播图来悼念达叔，达叔一路走好！（附源码）♥][_80]**

**[♥ 仿抖音刷新进度条（附源码）♥][Link 5]**

**[♥ 仿头条方形刷新进度条（附源码）♥][Link 6]**

**[♥ 仿360加速球、水波评分特效（附源码）♥][_360]**

**[♥ 基于canvas的刮刮卡（附源码）♥][_canvas 1]**

**[♥ 原生js写的左侧飞入拼图特效，你是喜欢美女单飞还是双飞（附源码）♥][_js]**

**[♥ 用js写的旋转木马，在新年献给各位刚登基的皇帝，让你的后宫转起来！程序员就是可以为所欲为！（附源码）♥][_js 1]**

**[♥ 用js写的轮播图，八位女明星，你翻谁的牌，程序员就是可以为所欲为！（附源码）♥][_js 2]**

**[♥ 原生js实现美女拼图，把美女老婆抱回家，5个美女够不够！程序员就是可以为所欲为！（附源码）♥][_js_5]**

**[♥ 用js仿探探拖拽卡片的效果、飞卡片的效果，感觉挺酷，最后有美女看哦！（附源码）♥][_js 3]**

**[♥ 老婆说程序员不懂浪漫，程序员默默拿起了键盘，这就亲手带你去看流星雨，女人真会影响拔刀的速度（附源码）♥][Link 7]**

**[♥ 学生成绩管理系统（jsp+jquery+java+mysql+tomcat）有源码，你的毕设我的心（附源码）♥][_jsp_jquery_java_mysql_tomcat]**

[20210104220057914.gif]: /images/20210724/a462837c225f4e0a8f3d7c98703c4bcc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/d4c0cdd175734df59e34859cdfb15ace.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1]: /images/20210724/510d033a665f49d4a0de07ad4af1d821.png
[2021010421422349.png]: /images/20210724/3ff8c9e72fe34fbdade8ff8040e9eda2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2]: /images/20210724/e1d04627c0144b25a58715c9fd5e3daf.png
[_canvas]: https://blog.csdn.net/dkm123456/article/details/115529446
[Link 1]: https://blog.csdn.net/dkm123456/article/details/115215032
[_JavaScript]: https://blog.csdn.net/dkm123456/article/details/114990229
[_JavaScript 1]: https://blog.csdn.net/dkm123456/article/details/114821927
[_JavaScript 2]: https://blog.csdn.net/dkm123456/article/details/115457093
[Link 2]: https://blog.csdn.net/dkm123456/article/details/115219368
[_JavaScript 3]: https://blog.csdn.net/dkm123456/article/details/114103563
[_JavaScript 4]: https://blog.csdn.net/dkm123456/article/details/113680875
[_JavaScript 5]: https://blog.csdn.net/dkm123456/article/details/114695468
[_JavaScript 6]: https://blog.csdn.net/dkm123456/article/details/112850520
[Link 3]: https://blog.csdn.net/dkm123456/article/details/112204855
[Link 4]: https://blog.csdn.net/dkm123456/article/details/114312198
[_80]: https://blog.csdn.net/dkm123456/article/details/114214374
[Link 5]: https://blog.csdn.net/dkm123456/article/details/113586884
[Link 6]: https://blog.csdn.net/dkm123456/article/details/113573795
[_360]: https://blog.csdn.net/dkm123456/article/details/113189108
[_canvas 1]: https://blog.csdn.net/dkm123456/article/details/113181216
[_js]: https://blog.csdn.net/dkm123456/article/details/112171337
[_js 1]: https://blog.csdn.net/dkm123456/article/details/112059073
[_js 2]: https://blog.csdn.net/dkm123456/article/details/112043042
[_js_5]: https://blog.csdn.net/dkm123456/article/details/111991734
[_js 3]: https://blog.csdn.net/dkm123456/article/details/111724361
[Link 7]: https://blog.csdn.net/dkm123456/article/details/113180223
[_jsp_jquery_java_mysql_tomcat]: https://blog.csdn.net/dkm123456/article/details/112402668