JavaScript实现触及鼠标显示文字功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>love</title>
<style type="text/css">
p{
color: #0000FF;
font-size: 33px;
letter-spacing: 16px;
font-family: "楷体";
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body bgcolor="#ffd2e9">
<p align="center">请拿起您的鼠标多次点击任何页面任何一个地方！！！</p>
<script type="text/javascript">
var html=document.querySelector("html");
html.addEventListener("click",heart,false);
function heart(e){
console.log(e);
var fontSize=16;
var left=e.clientX-fontSize/2;
var top=e.clientY-fontSize/2;
var b=document.createElement("b");
b.innerText="爱你";
b.style="font-size:"+fontSize+"; color:"+randomColor()+"; position:absolute; left:"+left+"px; top:"+top+"px; opacity:1;";
document.body.appendChild(b);
var timer=setInterval(function(){
var top=b.style.top.replace("px","");
b.style.top=top-1+"px";
b.style.opacity-=0.05;
if(b.style.opacity<0){
document.body.removeChild(b);
clearInterval(timer);
}
},100)
function randomColor(){
return "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")";
}
}
</script>
</body>
</html>
扫一扫
260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
