点击页面出现爱心效果

最新推荐文章于 2022-12-01 09:00:49 发布

图图小淘气_real

最新推荐文章于 2022-12-01 09:00:49 发布

阅读量1.4k

点赞数 2

分类专栏：前端 JAVA

本文链接：https://blog.csdn.net/qq_41995919/article/details/100678318

版权

前端同时被 2 个专栏收录

73 篇文章 0 订阅

订阅专栏

JAVA

70 篇文章 1 订阅

订阅专栏

源码：

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
		<style type="text/css">
			#love {
				width: 30px;
				height: 30px;
				/*border: 1px solid red;*/
				position: absolute;
			}
			
			#first {
				width: 15px;
				height: 26px;
				background-color: red;
				position: absolute;
				right: 3.2px;
				bottom: 0;
				transform: rotate(45deg);
				border-radius: 10px 10px 1px 1px;
				opacity: 1;
			}
			
			#second {
				width: 15px;
				height: 26px;
				background-color: red;
				position: absolute;
				left: 3.2px;
				bottom: 0;
				transform: rotate(-45deg);
				border-radius: 10px 10px 1px 1px;
				opacity: 1;
			}
		</style>
	</head>

	<body></body>

	<script type="text/javascript">
		function random(lower, upper) {
			return Math.floor(Math.random() * (upper - lower)) + lower;
		}
		var body = document.getElementsByTagName("body")[0];
		document.onclick = function(e) {
			var num = random(0, 19);
			// 颜色数组
			var color = ["peru", "goldenrod", "yellow",
				"chartreuse", "palevioletred", "deeppink",
				"pink", "palegreen", "plum",
				"darkorange", "powderblue", "orangered",
				"orange", "orchid", "red",
				"aqua", "salmon", "gold", "lawngreen"
			]

			var divmain = document.createElement("div");
			var first = document.createElement("div");
			var second = document.createElement("div");
			// 给div加属性
			divmain.setAttribute("id", "love");
			divmain.setAttribute("class", "love");
			first.setAttribute("id", "first");
			second.setAttribute("id", "second");
			// 向最外层内添加内层div
			divmain.appendChild(first);
			divmain.appendChild(second);
			// 根据鼠标位置来确定div的位置
			//divmain.style.top = e.pageY + "px";
			//divmain.style.left = e.pageX + "px";
			divmain.style.cssText = "top:" + e.pageY + "px;left:" + e.pageX + "px";

			// 给心形div加随机颜色
			first.style.backgroundColor = color[num];
			second.style.backgroundColor = color[num];
			body.appendChild(divmain);

			$(".love").animate({
				opacity: "0",
				top: "-=50px"
			}, 1500);

		}

		// 利用定时器来清除页面的垃圾
		setInterval(function() {
			var div = document.getElementsByClassName("love");
			var len = div.length;
			var num;
			for(var i = len - 1; i >= 0; i--) {
				num = parseInt(div[i].style.opacity);
				if(num <= 0) {
					div[i].remove();
				}
			}

		}, 3500);
	</script>

</html>

图图小淘气_real

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
点击页面出现爱心效果

源码：<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> #love { width: 30px; h...
复制链接

扫一扫