js网页下雪效果，特别的浪漫

灰太狼 2022-04-02 06:58 269阅读 0赞

## 先看效果： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3NTYwNDY_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3NTYwNDY_size_16_color_FFFFFF_t_70 1]

如果对屏幕下雪感兴趣的话可以去看看我另一篇博客  
https://blog.csdn.net/u010756046/article/details/80552722

今天是圣诞节，我依旧孤独的躲在宿舍角落里，听着陈奕迅的圣诞结，一边写着这些无聊到蛋疼的程序还要一边教你们如何写这些无聊到蛋疼的程序，念及此不觉潸然泪下。。。

## 代码： ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>认真的雪</title>
    		<style type="text/css">
    			.xue{
    				position: absolute;
    				background: url(img/xue.png);
    				background-size: 100% 100%;
    				margin: auto;
    				/* 雪的样式 */
    			}
    			#bj{
    				position: fixed;
    				width: 100%;
    				height: 100%;
    				top: 0;
    				left: 0;
    				background: black;
    				/* 背景 全黑的背景 */
    			}
    			#hua{
    				position: fixed;
    				width: 100%;
    				height: 100%;
    				top: 0;
    				left: 0;
    				right: 0;
    				bottom: 0;
    				/* 画布 所有的雪花都花在这里 */
    			}
    		</style>
    		<script type="text/javascript">
    			
    			
    			var list = new Array();//用来装雪花的集合
    			
    			
    			//网页加载好之后会自动执行这个方法
    			window.onload = function() {
    				setInterval("run()", 10);//执行这个方法之后开始下雪
    				//参数1:方法名	参数2:间隔时间单位ms
    				//意思是每隔10ms执行一次run()方法
    			}
    			
    			
    			function newXue() { //创建一个雪花
    				var v = new Object();//创建一个对象
    				v.wh = Math.random() * 20 + 15;//wh代表雪花的宽高
    				var gailv = window.innerWidth / (window.innerWidth + window.innerHeight);
    				//gailv=概率的拼音;概率=浏览器宽度/(浏览器宽度+浏览器高度)
    				//假设你浏览器是1920*1080的那gailv就是0.64
    				//然后 雪花出现的位置有64%是在屏幕上边,36%是在屏幕右边
    				if (Math.random() < gailv) {
    					//在屏幕上方创建雪花 设置xy坐标
    					v.x = Math.random() * window.innerWidth;
    					v.y = -v.wh;
    				} else {
    					//在屏幕右方创建雪花 设置xy坐标
    					v.x = window.innerWidth;
    					v.y = Math.random() * window.innerHeight;
    				}
    				
    				
    				v.sdx = Math.random() + 0.3;//雪花的x轴移动速度
    				v.sdy = Math.random() + 1;//雪花的y轴移动速度
    				v.div = document.createElement("div");//创建一个div,每个雪花都有一个div,这个div是用来显示雪花的
    				v.div.className = "xue";//设置div的类
    				
    				//设置div的位置
    				v.div.style.width = v.wh + "px";
    				v.div.style.height = v.wh + "px";
    				document.getElementById("hua").appendChild(v.div);//把这个div添加到画布（hua）里
    				list.push(v);//把雪花添加到集合
    			}
    			
    			var loadxue = 10;
    			var load = 0;
    			
    			function run() {
    				load++;//让load自增
    				if (load == loadxue) {
    					//每当load == loadxue时 创建一个雪花
    					//这个方法每10ms执行一次,每执行10次这个方法就创建一个雪花
    					newXue();
    					load = 0;
    				}
    				//雪花的移动,遍历list集合
    				for (var i = 0; i < list.length; i++) {
    					var v = list[i];
    					//一些简单的坐标计算
    					v.x -= v.sdx;
    					v.y += v.sdy;
    					v.div.style.left = v.x + "px";
    					v.div.style.top = v.y + "px";
    					//雪花飘出可视范围之后删除雪花
    					if (v.x + v.wh < 0 || v.y > window.innerHeight) {
    						list.splice(i, 1);//从list删除雪花
    						document.getElementById("hua").removeChild(v.div);//删除div
    					}
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id="bj"></div>
    		<div id="hua"></div>
    	</body>
    </html>

下载地址：https://download.csdn.net/download/u010756046/10875971 （含雪花素材）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3NTYwNDY_size_16_color_FFFFFF_t_70]: /images/20220402/b0d29c62b5394d84b36b06fe14308044.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3NTYwNDY_size_16_color_FFFFFF_t_70 1]: /images/20220402/0748a5551997459eb130f8431a4cad3f.png