鼠标点击事件出现小爱心的js代码

以下是一个简单的鼠标点击事件出现小爱心的JS代码：

// 获取页面上的父元素
var parent = document.querySelector('.parent');

// 监听鼠标点击事件
parent.addEventListener('click', function(event) {
  // 创建爱心元素
  var heart = document.createElement('div');
  heart.classList.add('heart');
  // 设置爱心位置
  heart.style.left = event.clientX + 'px';
  heart.style.top = event.clientY + 'px';
  // 将爱心元素添加到页面上
  parent.appendChild(heart);
  // 移除爱心元素
  setTimeout(function() {
    heart.remove();
  }, 800);
});

接下来需要在 CSS 中定义 `.heart` 类，来实现爱心的样式：

.heart {
  position: absolute;
  height: 30px;
  width: 30px;
  background-image: url('heart.png');
  background-size: contain;
  background-repeat: no-repeat;
  animation: heart 0.8s ease-out;
}

@keyframes heart {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

在上面的代码中，我们使用了一个背景图片来代表爱心，这个图片可以自己准备。同时定义了一个 CSS 动画，用来实现爱心出现和消失的效果。

最后只需要在 HTML 中添加一个具有 `.parent` 类的元素作为父元素，就可以让上面的代码生效了。