js点击页面可以执行一个星星动画

加载页面时可以调用函数

(function(window,document,undefined){init()})(window,document);

init()函数，里面调用的三个函数

 function init(){
                cssText(".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: absolute;}"+
                	".heart:after{top: -5px;}"+
                	".heart:before{left: -5px;}");
                attachEvent();
                gameloop();
        }

cssText()函数，把传递过来的样式变成css文件

function cssText(css){
var style = document.createElement(“style”);
console.log(style);
console.log(document.createTextNode(css));
style.type=“text/css”;
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName(‘head’)[0].appendChild(style);
}

attachEvent();调用此可以点击调用点击事件，并可以创建一个心形

 function attachEvent(){
                var old = typeof window.onclick==="function" && window.onclick;
                window.onclick = function(event){
                        old && old();
                        createHeart(event);
                }
        }

createHeart()函数，

var hearts = [];
  function createHeart(evens){
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push({
                    el : d,
                    x : event.clientX - 5,
                    y : event.clientY - 5,
                    scale : 1,
                    alpha : 1,
                    color : randomColor()
            });
            document.body.appendChild(d);
    }

生成随机颜色的函数 randomColor

 function randomColor(){
                return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
        }

gameloop()函数，执行一个动画，先上升后消失，这个过程有一定的时间

function gameloop(){
    
                for(var i=0;i<hearts.length;i++){
                	console.log(hearts[i]);
                    if(hearts[i].alpha <=0){
                            document.body.removeChild(hearts[i].el);
                            //清空数组，重新开始
                            hearts.splice(i,1);
                            continue;
                    }
                    hearts[i].y--;
                    hearts[i].scale += 0.004;
                    hearts[i].alpha -= 0.013;
                    console.log(hearts[i].el.style.cssText);
                    hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
            }
            requestAnimationFrame(gameloop);
        }

定义动画的运行时间和兼容性处理

window.requestAnimationFrame = (function(){
                return window.requestAnimationFrame || 
                           window.webkitRequestAnimationFrame ||
                           window.mozRequestAnimationFrame ||
                           window.oRequestAnimationFrame ||
                           window.msRequestAnimationFrame ||
                           function (callback){
                                   setTimeout(callback,1000/60);
                           }
        })();