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

这篇具有很好参考价值的文章主要介绍了用HTML、CSS和JS打造绚丽的雪花飘落效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、程序代码

二、代码原理

三、运行效果


用HTML、CSS和JS打造绚丽的雪花飘落效果,HTML,HTML,CSS,JavaScript,前端开发,Web 开发

一、程序代码

<!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打造绚丽的雪花飘落效果,HTML,HTML,CSS,JavaScript,前端开发,Web 开发

用HTML、CSS和JS打造绚丽的雪花飘落效果,HTML,HTML,CSS,JavaScript,前端开发,Web 开发文章来源地址https://www.toymoban.com/news/detail-826702.html

到了这里,关于用HTML、CSS和JS打造绚丽的雪花飘落效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML+CSS+JavaScript:实现B站评论发布效果

    1、用户输入内容,输入框右下角实时显示输入字数  2、为避免用户输入时在内容左右两端误按多余的空格,在发送评论时,检测用户输入的内容左右两端是否带有空格,若有空格,发布时自动取消左右两端的空格 3、若用户发布的内容为空,则自动取消该条评论的发送,并弹

    2024年02月14日
    浏览(47)
  • HTML、CSS和JavaScript,实现换肤效果的原理

    这篇涉及到HTML DOM的节点类型、节点层级关系、DOM对象的继承关系、操作DOM节点和HTML元素 还用到HTML5的本地存储技术。 换肤效果的原理:是在选择某种皮肤样式之后,通过JavaScript脚本来加载选中的样式,再通过localStorage存储。 先来回忆一下HTML DOM的相关知识。 DOM模型就是通

    2024年02月06日
    浏览(46)
  • HTML+JS+CSS歌词滚动效果

    这些代码主要实现了歌词的初始化、显示和随音频播放的同步滚动。其中, initWords 函数用于将歌词字符串解析成数据数组, parseTime 函数用于将时间字符串转换为秒数。通过 setOffset 函数实现歌词的滚动和高亮显示。最后,添加了一个滚动事件监听器,以便用户通过滚动调整

    2024年01月17日
    浏览(45)
  • HTML+CSS+JavaScript:两种方法实现商品价格筛选效果

    鼠标点击上方菜单栏中不同的价格区间,自动筛选出价格符合条件的商品,并渲染在页面中   以下是缺失JS部分的代码,感兴趣的小伙伴可以先自己试着写一写 1、封装渲染函数,传入的参数为数组对象,将数组中的每一个对象进行数据处理,再渲染到页面中 2、利用事件委托

    2024年02月14日
    浏览(65)
  • HTML+JS樱花飘落特效+鼠标点击特效

    目录:     效果: index.html 代码: yinghua.js 代码(图片为base64编码,可根据具体情况修改): shubiaodianji.js 代码:

    2024年02月11日
    浏览(60)
  • 用HTML、CSS和JavaScript实现鼠标可交互的3D太阳和月亮切换效果

    部分数据来源: ChatGPT  引言         太阳和月亮对于我们来说是一种常见的对比,这篇文章将介绍一个使用HTML、CSS和JavaScript创建的网页场景,能够把太阳和月亮切换展示给用户。这个场景能够让用户使用鼠标和滚轮与场景互动,带来更多的趣味和体验。 这里展示了HT

    2024年02月07日
    浏览(75)
  • html、css 和 JS(JavaScript) 的相互关联

    工作所需,需要承担一些字体矢量动效玩法实现;调研发现前端可以快速实现一些矢量动画效果; 本文旨在介绍前端的三大利器(HTML / CSS / JS)的区别和联系,就当个引子 HTML CSS JS 介绍 HTML是超文本标记语言的简称,它是一种不严谨的、简单的标识性语言。它用各种标签将页

    2024年02月10日
    浏览(61)
  • HTML+CSS+JS 学习笔记(三)———Javascript(中)

    🌱博客主页:大寄一场. 🌱系列专栏:前端 🌱往期回顾:HTML+CSS+JS 学习笔记(三)———Javascript(上) 😘博客制作不易欢迎各位👍点赞+⭐收藏+➕关注 目录  JavaScript中的函数 函数的定义和调用 函数的定义  函数的调用 嵌套函数  递归函数  变量的作用域 全局变量和局部

    2024年02月06日
    浏览(80)
  • 5种Python雪花飘落代码(建议收藏)

    前言 本文章向大家介绍用 Python 实现雪花飘落效果,运行以下代码,你将会看到一个美丽的雪花效果。你可以根据自己的需求,调整代码中的参数值以及其他细节。 第一种 普通雪花代码: 第二种 随机下落的雪花: 第三种 随机颜色代码: 使用了turtle模块和random模块,会在黑

    2024年02月11日
    浏览(97)
  • MATLAB | 一起来绘制有雪花飘落的圣诞树叭

    请尊重原创劳动成果 转载请注明本文链接 及文章作者:slandarer 圣诞节快到了(虽然还有十天),一起来用MATLAB画个简单圣诞树叭~树的整体构造参考大佬 Anselm ,同时一部分装饰代码参考了大佬 Hanchu Wang 。 代码几乎取消了全部的循环,因此至少需要17b之后的版本,仅存的循

    2024年02月03日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包