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