js 点击页面出现烟花 心形

css :
1  body{width:1000px; height:500px;}

  input{ margin:100px; width:250px; height: 50px }

3 .Fireworks{width:4px; height: 4px; position: absolute;}

 .heart{width: 10px;height: 10px;position: fixed;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}

js: <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

js:
  1 $(function(){

     var input_e=$("input");

     //javascript检测浏览器是否支持某些事件

     //typeof input["oninput"] == "undefined"

     var y=input_e.offset().top;

     var x=input_e.offset().left;

     var len=0;

     var firewNum=15;// 烟花个数

         // 点击页面 在鼠标位置 出现心形 烟花

     $("body").click(function(ev){

         xin(ev); // 点击心形

         Fireworks(ev)// 点击烟花

     });

     // 鼠标点击出现心形

     function xin(ev)

     {

         var color=randColor();

         var div=document.createElement("div");

             div.className='heart';

             div.style.backgroundColor=color;

             div.style.left=ev.pageX+'px';

             div.style.top=ev.pageY+'px';
　　　　　　　　　//解决滚动屏幕后心形不在点击位置问题
　　　　　　　　　 div.style.position='absolute';

             document.body.append(div);

             var i=1;

         var t=setInterval(function(){

             div.style.top=div.offsetTop-2+'px';

             i-=0.01;

             div.style.opacity=i;

             var scale=1+(1-i);

             div.style.transform='scale('+scale+','+scale+') rotate(45deg)';

             if(i<0.01 || div.style.top+div.offsetTop>=window.innerHeight)

             {

                 div.remove();

                 clearInterval(t);

             }

         },30)

     }

     // 随机色

     function randColor()

     {

         var r=parseInt(Math.random()*256);

         var g=parseInt(Math.random()*256);

         var b=parseInt(Math.random()*256);

         var a=Math.random().toFixed(1)

         var color='rgba('+r+','+g+','+b+','+a+')';

         return color;

     }

     // 创建烟花

     function Fireworks(ev)

     {

         // 烟花一种颜色-- 90去掉注释

         /*var color=randColor();

         for(var i=0;i<firewNum;i++)

         {

             create(ev,color);

         }*/

         for(var i=0;i<firewNum;i++)

         {

             create(ev,null);

         }

     }

     function create(ev,color)

     {// 操作元素使用的 原生 js ,使用jquery 失败 取不到元素

         var div=document.createElement("div");

             div.className='Fireworks';

             div.style.backgroundColor=randColor();

         //    div.style.backgroundColor=color;

             div.style.left=ev.pageX+'px';

             div.style.top=ev.pageY+'px';
　　　　　　　　　//解决滚动屏幕后心形不在点击位置问题 
　　　　　　　　　　div.style.position='absolute';

             document.body.append(div);

             var i=1;

             // 正负 -5右     +5左

             var speedX =(parseInt(Math.random()*2) == 0 ? 1 : -1)*parseInt(Math.random()*5 + 1);

             // 向上 -0--17

             var speedY=-parseInt(Math.random()*18);

             var time=setInterval(function()

             {

                 ++i;

                 var left=div.offsetLeft+speedX;

                 var top=div.offsetTop+speedY+i;

                  // 加 i top 越来越大， 烟花下落，否则烟花向上飘 每次获取得div.offsetTop越来越大 速度越来越慢

                 div.style.left=left+'px';

                 div.style.top=top+'px';
　　　　　　　　　　　　//解决滚动屏幕后点击不出现烟花问题  div.offsetTop+div.offsetHeight>window.innerHeight 改为 div.offsetTop+div.offsetHeight-document.documentElement.scrollTop>window.innerHeight

                 if(div.offsetLeft+div.offsetWidth>window.innerWidth || div.offsetLeft<2 || div.offsetTop+div.offsetHeight>window.innerHeight || div.offsetTop<2 )

                 {

                     //如果超出屏幕 移除div 关闭定时器

                     div.remove();

                     clearInterval(time);

                 }

             },40)

     }

 });

另一种封装的点击页面出现心形

 //-------------------------------封装的 点击心 形 自动执行

     !function(e, t,evt) {

     // 元素属性赋值

     function r() {

         for (var e = 0; e < s.length; e++)

         {

             if(s[e].alpha <= 0)

             {

                 t.body.removeChild(s[e].el), s.splice(e, 1);

             }else{

                 s[e].y--,

                 s[e].scale += .004,

                 s[e].alpha -= .013,

                 s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999";

             }

         }

         requestAnimationFrame(r);

         return;

     }

     // 如果存在点击事件 执行动画

     function n() {

         var t = "function" == typeof e[evt] && e[evt];

         e[evt] = function(e) {

             t && t(), o(e);

         }

     }

     // 创建元素并且定义初始属性数组

     function o(e) {

         var a = t.createElement("div");

         a.className = "heart", s.push({

             el: a,

             x: e.clientX - 5,

             y: e.clientY - 5,

             scale: 1,

             alpha: 1,

             color: c()

         }), t.body.appendChild(a)

     }

     // 定义样式文件并添加

     function i(e) {

         var a = t.createElement("style");

         a.type = "text/css";

         try {

             a.appendChild(t.createTextNode(e))

         } catch (t) {

             a.styleSheet.cssText = e

         }

         t.getElementsByTagName("head")[0].appendChild(a)

     }

     // 返回随机色

     function c() {

         return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"

     }

     // 执行动画兼容处理

     var s = [];

     e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||

     function(e) {

         setTimeout(e, 1e3 / 60)

         }, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()

     }(window, document,'onclick');