<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <style type="text/css"> #love { width: 30px; height: 30px; /*border: 1px solid red;*/ position: absolute; } #first { width: 15px; height: 26px; background-color: red; position: absolute; right: 3.2px; bottom: 0; transform: rotate(45deg); border-radius: 10px 10px 1px 1px; opacity: 1; } #second { width: 15px; height: 26px; background-color: red; position: absolute; left: 3.2px; bottom: 0; transform: rotate(-45deg); border-radius: 10px 10px 1px 1px; opacity: 1; } </style> </head> <body></body> <script type="text/javascript"> function random(lower, upper) { return Math.floor(Math.random() * (upper - lower)) + lower; } var body = document.getElementsByTagName("body")[0]; document.onclick = function(e) { var num = random(0, 19); // 颜色数组 var color = ["peru", "goldenrod", "yellow", "chartreuse", "palevioletred", "deeppink", "pink", "palegreen", "plum", "darkorange", "powderblue", "orangered", "orange", "orchid", "red", "aqua", "salmon", "gold", "lawngreen" ] var divmain = document.createElement("div"); var first = document.createElement("div"); var second = document.createElement("div"); // 给div加属性 divmain.setAttribute("id", "love"); divmain.setAttribute("class", "love"); first.setAttribute("id", "first"); second.setAttribute("id", "second"); // 向最外层内添加内层div divmain.appendChild(first); divmain.appendChild(second); // 根据鼠标位置来确定div的位置 //divmain.style.top = e.pageY + "px"; //divmain.style.left = e.pageX + "px"; divmain.style.cssText = "top:" + e.pageY + "px;left:" + e.pageX + "px"; // 给心形div加随机颜色 first.style.backgroundColor = color[num]; second.style.backgroundColor = color[num]; body.appendChild(divmain); $(".love").animate({ opacity: "0", top: "-=50px" }, 1500); } // 利用定时器来清除页面的垃圾 setInterval(function() { var div = document.getElementsByClassName("love"); var len = div.length; var num; for(var i = len - 1; i >= 0; i--) { num = parseInt(div[i].style.opacity); if(num <= 0) { div[i].remove(); } } }, 3500); </script> </html>