南强小屋 Design By 杰米
本文实例为大家分享了js实现鼠标点击飘爱心的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标点击特效</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1743249_grf4shm1g3t.css" >
<style>
html {
cursor: pointer;
}
h3 {
text-align: center;
user-select: none;
}
.div-box {
width: 30px;
height: 30px;
font-size: 30px;
position: absolute;
}
</style>
</head>
<body>
<h3>请点击屏幕查看效果</h3>
<script>
window.onclick = function (e) {
//存储需要的颜色
let arr = ["red", "yellow", "green", "pink", "blue", "purple", "orangered"];
//随机产生一个颜色
let heartNum = Math.floor(Math.random() * arr.length);
let div = document.createElement("div");
div.setAttribute("class", "iconfont iconzan div-box");
div.style.color = arr[heartNum];
document.body.appendChild(div);
//获得鼠标的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";
//获得0-1的整数
let num = Math.round(Math.random());
let timer = setInterval(() => {
y -= 10;
if (num === 0) x -= 10;
else x += 10;
div.style.left = x + "px";
div.style.top = y + "px";
//如果超出屏幕范围，则删除此节点
if (y < -100) {
clearInterval(timer);
div.remove();
}
}, 100);
}
</script>
</body>
</html>
效果图如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无js实现鼠标点击飘爱心效果的评论...
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。