前端HTML（四）—— 使用CSS+JS完成雪花飘

最新推荐文章于 2022-07-26 09:59:54 发布

TwoYellowGuns

最新推荐文章于 2022-07-26 09:59:54 发布

阅读量295

点赞数

分类专栏：前端HTML+CSS 文章标签： html js css

本文链接：https://blog.csdn.net/baidu_27414099/article/details/104432884

版权

前端HTML+CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>雪花飘飘</title>
		<style>
			/*按钮的div*/
			.buttondiv{
				border: 0px red solid;
				width: 60px;
				height: 35px;
				float: left;
				margin-left: 5px;
			}
			/*按钮的文本*/
			.buttondiv input{
				width: 60px;
				height: 35px;
				font-size: 20px;
				float: left;
			}
		</style>
		<script>
			//产生雪花
			function creatSnow(num){
				for(var i = 0; i < num; i++){
					var value = document.createElement("div");
					value.style.border = "0px red solid";
					value.style.width = "30px";
					value.style.height = "30px";
					value.style.float = "left";
					value.style.position = "fixed";
					value.style.marginLeft = Math.random() * window.innerWidth + "px";
					value.style.marginTop =  Math.random() * window.innerHeight - 200 + "px";
					value.innerHTML = "<img  src = '../image/white-snow.png' width='30px' height='30px'/>";
					document.body.appendChild(value);
				}
			}
			//雪花运动
			function moveSnow(){
				var oDiv = document.getElementsByTagName("div");
				var len = oDiv.length;
				for(var i = 0; i < len; i++){
					if(oDiv[i].offsetTop > window.innerHeight - 100){
						oDiv[i].remove();
					}else {
						oDiv[i].style.marginTop = oDiv[i].offsetTop + Math.random() - 30  + "px";
					}
				}
				if(oDiv.length < 50){
					creatSnow(10);
				}
			}
			var timer = null;
			//定时器-开始
			function startTimer(){
				if(timer == null){
					timer = setInterval("moveSnow()", 10);
				}
			}
			//定时器-停止
			function stopTimer(){
				if(timer != null){
					clearInterval(timer);
				}
				timer = null;
			}
			//清除雪花
			function clearSnow(){
				stopTimer();
				var oDiv = document.getElementsByTagName("div");
				var len = oDiv.length;
				for(var i = 0; i < len; i++){
					oDiv[0].remove();
				}
			}
		</script>
	</head>
	<body background="../image/snow-night.jpg" style="width: 1000px; height: 800px;">
			<input type="button" value="增加" onclick="creatSnow(50)"/>
			<input type="button" value="开始" onclick="startTimer()"/>
			<input type="button" value="暂停" onclick="stopTimer()"/>
			<input type="button" value="清除" onclick="clearSnow()"/>
	</body>
</html>

TwoYellowGuns

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端HTML（四）—— 使用CSS+JS完成雪花飘

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>雪花飘飘</title> <style> /*按钮的div*/ .buttondiv{ border: 0px red solid; width: 60p...
复制链接

扫一扫