html实现点击出现小爱心

最新推荐文章于 2024-05-02 13:33:37 发布

lyk_dtf

最新推荐文章于 2024-05-02 13:33:37 发布

阅读量1.9k

点赞数 2

分类专栏：无聊文章标签： html js css

本文链接：https://blog.csdn.net/lyk520dtf/article/details/113438448

版权

无聊专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

快过年了~，今年因为特别原因不能回家过年了，在公司干坐在好无聊啊，就搞些花里胡哨的东西吧（合理划水）

废话不多说，直接上代码~，借鉴了某位大佬的，链接就不放了（找不找了>-<）

html:

	<head>
		<meta charset="utf-8">
		<title>点击小爱心2.0</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<style type="text/css">
			.icon{
				fill:currentColor;/* 必须加这个,svg标签才能改变颜色 */
			}
			
			#div_dom{
				display: none;/* 隐藏dom母体 */
			}
			
			div{
				position: absolute;/* 必须加这个,div才可以设置位置为鼠标点击位置 */
			}
			
			.opacity1 {
				opacity: 0.6;/* 透明度0.6 */
			}
			
			.opacity2 {
				opacity: 0.3;
			}
		</style>
	</head>
	<body>
		<h3 style="text-align: center;">请点击屏幕查看效果</h3>
		<div id="div_dom">
			<svg t="1611984899556" class="icon" viewBox="0 0 1169 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1962" width="36.53125" height="32" xmlns:xlink="http://www.w3.org/1999/xlink">
				<defs>
					<style type="text/css"></style>
					</defs>
				<path d="M1045.333 117.333C919.467-6.4 716.8-10.667 584.533 106.667 452.267-10.667 249.6-6.4 123.733 117.333c-128 128-130.133 337.067-2.133 467.2l4.267 4.267 384 384c40.533 40.533 106.666 42.667 149.333 2.133l2.133-2.133 384-384c128-128 130.134-337.067 4.267-465.067-2.133-4.266-2.133-4.266-4.267-6.4z" p-id="1963">
			</path>
			</svg>
		</div>
	</body>

js:

	<script type="text/javascript">
		window.onclick = function(e) {
			//存储需要的颜色
			let arr = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#9AECDB", "#f1c40f", "#e67e22", "#e74c3c", "#9980FA",
				"#c0392b", "#d35400", "#f39c12"];
			//随机产生一个颜色
			let heartNum = Math.floor(Math.random() * arr.length);
			
			var domss=document.getElementById("div_dom"); // 获得被克隆的节点对象 
			var div=domss.cloneNode(true);
			
			div.style.color=arr[heartNum];
			
			div.setAttribute("id", "");//取消id值，变为可见
			div.setAttribute("class", "opacity0");
			
			//获得鼠标的x,y轴的位置，并减去自身宽高的一半，使其能够在爱心的正中心
			let x = e.pageX - div.offsetWidth / 2;
			let y = e.pageY - div.offsetHeight / 2;
			div.style.left = x + "px";
			div.style.top = y + "px";
			
			//将dom追加到body中
			document.body.appendChild(div);
			//获得0-1的整数
			let num = 1;
			let timer = setInterval(() => {
				num++;
				if (num == 10) div.setAttribute("class", "opacity1");
				if (num == 20) div.setAttribute("class", "opacity2");
				y -= 5;
				div.style.left = x + "px";
				div.style.top = y + "px";
				//如果超出屏幕范围，则删除此节点
				if (num == 30) {
					clearInterval(timer);
					div.remove();
				}
			}, 70);
		}
	</script>

该有的上面都有注释，我就不说了下面放个dome
点击小爱心╮(╯▽╰)╭

lyk_dtf

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
6
评论
html实现点击出现小爱心

前言快过年了，今年因为特别原因不能回家过年了，在公司有没什么事，就搞些花里胡哨的东西吧废话不多说，直接上代码~，借鉴了某位大佬的，链接就不放了（找不找了>-<）html: <head> <meta charset="utf-8"> <title>点击小爱心2.0</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min..
复制链接

扫一扫

专栏目录