用JS随机生成雪花（课堂作业）

最新推荐文章于 2022-04-03 06:30:00 发布

eternity_w

最新推荐文章于 2022-04-03 06:30:00 发布

阅读量437

点赞数

分类专栏：笔记小测试题文章标签： javascript css html5

本文链接：https://blog.csdn.net/eternity_w/article/details/104078479

版权

笔记同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

小测试题

1 篇文章 0 订阅

订阅专栏

用JS随机生成雪花

本农听了老师的讲解，又自己加了新的运动轨迹，让雪花下落的更自然一些(但是好像没啥用)，原理是不变的…

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				margin: 0;
			}

			.bg {
				position: absolute;
				height: 100%;
				width: 100%;
				background: url(img/image23.jpg) no-repeat top center;
				background-size: cover;
				overflow: hidden;
			}

			.bg img {
				position: absolute;
				left: 0;
				top: 10px;
				-webkit-transition: all 0.5s ease-out;
				-moz-transition: all 0.5s ease-out;
				-ms-transition: all 0.5s ease-out;
				-o-transition: all 0.5s ease-out;
				transition: all 0.5s ease-out;
			}
		</style>
	</head>

	<body>
		<div id="box" class="bg">

		</div>
		<script type="text/javascript">
			//查找元素
			var oBox = document.getElementById("box");
			//计算窗口宽高
			var winWidth = oBox.offsetWidth;
			var winHeight = oBox.offsetHeight;
			//定时器变量
			var tick;

			function cubeGenerator() {
				//创建img元素
				var oImg = document.createElement("img");
				//修饰元素 
				//让图片生成随机的大小(长 、宽)
				var w = h = Math.random() * 20 + 10;
				oImg.style.height = h + "px";
				oImg.style.width = w + "px";
				//随机插入 图片
				var num = parseInt(Math.random() * 20 + 1);
				oImg.src = 'img/snowflake' + num + '.png';


				//随机的left值
				var maxleft = winWidth - w;
				var x = Math.random() * maxleft;
				oImg.className = "img";
				oImg.style.left = x + "px";
				oBox.appendChild(oImg);
				move(oImg);

			}
			//定时器运行
			tick = setInterval(cubeGenerator, 200);

			function move(el) {
				// 获取目前top值
				var timer;
				//定义一个随机的初始位置和速度
				var step = parseInt(Math.random() * 50 + 10);
				var step2 = parseInt(Math.random() * 20 + 8);
				timer = setInterval(function() {
					//我写的不是直上直下的下落  要想直上直下的下落 写一个变量就行
					var top = el.offsetTop;
					var left = el.offsetLeft;
					var winHeight = window.innerHeight;
					var winWidth = window.innerWidth;
					//清除img 要不会占用内存 增加浏览器的负担 会崩溃的
					if (top > winHeight || left > winWidth) {
						clearInterval(timer);
						oBox.removeChild(el);
					}
					el.style.top = (top + step) + "px";
					el.style.left = (left + step2) + "px";
				}, Math.random() * 10)
			}
		</script>
	</body>

</html>

背景图片：大背景

//20种不同的雪花
//要把雪花图片都保存起来放在img文件里，img和index页面同级目录下哦！

snowflake1.png

snowflake2.png

snowflake3.png

snowflake4.png

snowflake5.png

snowflake6.png

snowflake7.png

snowflake8.png

snowflake9.png

snowflake10.png

snowflake11.png

snowflake12.png

snowflake13.png

snowflake14.png

snowflake15.png

snowflake16.png

snowflake17.png

snowflake18.png

snowflake19.png

snowflake20.png

注：还是个博客萌新，不太会用，图片都是一张一张上传的，幸亏只有20张…手动狗头保命
如果有不足之处多多批评，我会好好改善的，以上仅供参考哦！
（隔壁敲代码的老王）

eternity_w

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用JS随机生成雪花（课堂作业）

用JS随机生成雪花本农听了老师的讲解，又自己加了新的运动轨迹，让雪花下落的更自然一些(但是好像没啥用)，原理是不变的…<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&...
复制链接

扫一扫

专栏目录