用HTML、CSS和JS打造绚丽的雪花飘落效果

一、程序代码

html 复制代码

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=GBK">
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		#box {
			width: 100vw;
			height: 100vh;
			padding: 3px;
			position: absolute;
			background: black;
		}
	</style>
</head>

<body>
	<div id="box">

	</div>
</body>

<script>
	(function () {
		var screenWidth = screen.availWidth; // 获取屏幕宽度
		var screenHeight = screen.availHeight; // 获取屏幕高度
		var speed = 1; // 雪花下落的速度

		function Snow(size, downSize) {
			this.box = document.getElementById("box"); // 获取容器元素
			this.size = size; // 雪花数量
			this.downSize = downSize || 10; // 每次落下的雪花数量，默认为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; // 随机生成left值
				Math.random() > 0.8 ? (res = -res) : null; // 80%的概率使左边的雪花出现在左侧（left为负值）
			} else if (type == 'top') { // 初始的top
				res = -(Math.round(Math.random() * (50 - 40)) + 40); // 随机生成top值，负值使雪花在屏幕上方
			} else if (type == 'incre') { // 向下的速度
				res = Math.random() * (4 - 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'); // 获取随机的left值
				var top = this.getRandomThings('top'); // 获取随机的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'; // 设置left值
				snow.style.top = top + 'px'; // 设置top值
				snow.innerHTML = '&#10052'; // 设置雪花图标（Unicode编码）
				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) { // 每downSize个雪花一组，控制下落速度
					num++;
				}
				(function (s, n) { // 使用闭包保存snow和num的值
					setTimeout(function () { // 定时器，实现雪花分批下落
						that.doStart(s); // 调用doStart方法使雪花开始下落
					}, 1000 * n) // 每隔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')); // 获取当前的left和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); // 每隔speed毫秒执行一次定时器中的代码
			})(snow)
		}

		// 获取元素的样式值
		function getStyle(obj, prop) {
			var prevComputedStyle = document.defaultView ? document.defaultView.getComputedStyle(obj, null) : obj.currentStyle;
			return prevComputedStyle[prop];
		}

		new Snow(300, 30); // 创建一个Snow对象，传入雪花数量和每批下落的雪花数量
	})()

</script>

</html>

二、代码原理

这段代码主要通过JavaScript来操作DOM元素，实现了一个下雪的效果。首先，通过CSS样式设置整个页面的背景为黑色，并且创建一个id为"box"的容器元素用于容纳雪花。

接着，使用JavaScript代码自执行函数来封装雪花的相关逻辑。在这个函数中，获取屏幕的宽度和高度，并定义了雪花下落的速度。

然后，定义了一个Snow对象构造函数，用于创建雪花。构造函数接受两个参数，分别是雪花的数量和每批下落的雪花数量。在构造函数中，首先通过getElementById方法获取到容器元素，并设置容器的宽度和高度与屏幕一致。然后，使用for循环创建指定数量的雪花元素，通过随机数设置雪花的初始位置、大小和样式，并将雪花元素添加到数组item和文档片段中。最后，将文档片段添加到容器中。

接着，在Snow对象的原型上定义了一系列方法。其中，getRandomThings方法用于根据type参数获取随机的left值、top值、向下的速度、向右的速度或雪花的大小。init方法用于初始化雪花，设置容器的宽度和高度，并创建指定数量的雪花元素，并将其添加到容器中。start方法用于控制雪花的下落，通过定时器和闭包实现分批下落的效果。doStart方法用于针对每个雪花设置定时处理，根据当前位置和速度计算新的位置，并更新雪花元素的样式值，使其动起来。getStyle方法用于获取元素的样式值。

最后，在全局作用域中创建了一个Snow对象，传入了300个雪花和每批下落的雪花数量为30，从而开始执行下雪效果。

用HTML、CSS和JS打造绚丽的雪花飘落效果

一、程序代码

二、代码原理

三、运行效果