效果如下
实现的效果：
鼠标点击飘出随机彩色的爱心。
实现思路
1.鼠标点击出现效果，就需要绑定鼠标的点击事件click,
2.鼠标点击之后，js在页面上动态的创建一个节点，我这里创建的是div,其他的标签也是可以的，只是当做一个容器。创建元素节点之后不要忘记将元素追加至页面中。方法如下：
let div = document.createElement("div");
//setAttribute(),给元素设置属性，这里给创建的div设置了一个class属性,第二个引号里面的设置了div的一些样式
div.setAttribute("class", "iconfont iconzan div-box");
document.body.appendChild(div);
3.这个时候每点击一次页面就会出现一个爱心，但是需求是随机颜色的爱心,首先需要一个数组来存放我们需要的颜色，其次我们需要产生一个随机数，然后将这个随机数当做数组元素的下标来获得数组中对应下标的颜色值。方法如下：
//存储需要的颜色
let arr = ["red", "yellow", "green", "pink", "blue", "purple", "orangered"];
//随机产生一个颜色
let heartNum = Math.floor(Math.random() * arr.length);
div.style.color = arr[heartNum];
4.此时，彩色的随机爱心就是现实了，接下来就是如何让爱心出现在鼠标点击的位置，这里就需要e.pageX和e.pageY(鼠标在页面中的x和y轴的位置),e为事件对象，最后将鼠标的位置给到爱心的left和top,注意：这里的爱心必须使用了定位才可以实现效果。
function heart(e){
//div.offsetWidth是获得元素自身的宽度，div.offsetWidth / 2是为了让鼠标在爱心的正中心
let x = e.pageX - div.offsetWidth / 2;
let y = e.pageY - div.offsetHeight / 2;
div.style.left = x + "px";
div.style.top = y + "px";
}
5.接下来就是让创建的爱心动起来啦。这里就需要一个定时器，每个一定的时间执行一次就改变该爱心的left和top的值，从而实现飘动的效果。
//获得0-1的整数，用来判断和实现左右的飘动
let num = Math.round(Math.random());
//每个100毫秒就执行一次此方法
let timer = setInterval(() => {
//每执行一次y轴的距离就-10
y -= 10;
//如果点击产生的随机数num是0，就让它往左移动
if (num === 0) x -= 10;
//如果点击产生的随机数num是1，就让它往右移动
else x += 10;
div.style.left = x + "px";
div.style.top = y + "px";
//如果超出屏幕范围，则删除此节点并清除该节点的定时器
if (y < -100) {
clearInterval(timer);
div.remove();
}
}, 100);
完整代码如下：
<!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>
