前端点击移动生成小爱心

最新推荐文章于 2023-01-06 16:33:10 发布

犹大的誓言

最新推荐文章于 2023-01-06 16:33:10 发布

阅读量480

点赞数

分类专栏：前端文章标签： javascript html

本文链接：https://blog.csdn.net/qq_42638485/article/details/114366072

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端点击移动生成小爱心

我之前看见一个博客，鼠标点击的时候会有不同颜色的小爱心出现，我就心血来潮试着写了一下，并且加了鼠标移动也会产生小爱心,放在这里目的是以后万一我要用方便找，写的不好请海涵。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2078341_ccmcmll8mxw.css"/>//这里用的是我的在线图标库链接，改成自己的就好
		<script type="text/javascript">
			window.onload=function(){
				document.onclick = function(e){
					var e = e ||window.event;
					//点击的坐标
					var x= e.clientX-15,
						y= e.clientY-15;
					//创建容器
					var Odiv = document.createElement("div");
					var i =document.createElement("i");
					i.className = "iconfont iconyishoucang istyle";
					Odiv.className = "xin";
					Odiv.style.left = x +"px";
					Odiv.style.top = y + "px";
					Odiv.style.color =color();
					Odiv.appendChild(i)
					document.body.appendChild(Odiv);
					var finallytime = y-100;//这里设置图形的上升距离
					var time = setInterval(function(){
						if(y-6>finallytime){
							//上移
							y=y-6;//上升速度
							Odiv.style.top = y + "px";
						}else{
							y = finallytime;
							//清除
							Odiv.style.top = y + "px";
							clearInterval(time);
							document.body.removeChild(Odiv);
						}
					},1000/60);
					
				}
				var mark = 0;
				var now;
				document.onmousemove=function(e){
					now = Date.now();
					if(now-mark < 1000/15){//这里设置移动时图形的产生速度
						return;
					}else{
						mark=now;
						var e = e ||window.event;
						//点击的坐标
						var x= e.clientX-15,
							y= e.clientY-15;
						//创建容器
						var Odiv = document.createElement("div");
						var i =document.createElement("i");
						i.className = "iconfont iconyishoucang istyle";
						Odiv.className = "xin";
						Odiv.style.left = x +"px";
						Odiv.style.top = y + "px";
						Odiv.style.color =color();
						Odiv.appendChild(i)
						document.body.appendChild(Odiv);
						var finallytime = y-100;
						var time = setInterval(function(){
							if(y-6>finallytime){
								//上移
								y=y-6;
								Odiv.style.top = y + "px";
							}else{
								y = finallytime;
								//清除
								Odiv.style.top = y + "px";
								clearInterval(time);
								//清除子弹
								document.body.removeChild(Odiv);
								}
						},1000/60);
					}
				}
				//随机生成颜色
				function color(){
					var r = Math.floor(Math.random()*256);
					var g = Math.floor(Math.random()*256);
					var b = Math.floor(Math.random()*256);
					return "rgb("+r+","+g+","+b+")";
				}
			}
		</script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				user-select: none;
			}
			html,body{
				height: 100%;
				width: 100%;
				
				position: relative;
			}
			.xin{
				width: 30px;
				height: 30px;
				position: absolute;
				top: 100px;
				left: 100px;
				text-align: center;
				line-height: 30px;
			}
			.istyle{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		
	</body>
</html>

犹大的誓言

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端点击移动生成小爱心

前端点击移动生成小爱心我之前看见一个博客，鼠标点击的时候会有不同颜色的小爱心出现，我就心血来潮试着写了一下，并且加了鼠标移动也会产生小爱心,放在这里目的是以后万一我要用方便找，写的不好请海涵。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href
复制链接

扫一扫

专栏目录