学习blue的烟花效果

看了miaov blue课程讲烟花效果，边看边学习的，大家可以去看看blue的相关课程

<style>
    body{background:#000;overflow:hidden;}
    div{ position:absolute;}
</style>
<script type="text/javascript">
function getRndAndFillZero()
{
    var str=Math.ceil(Math.random()*16777215).toString(16);
    while(str.length<6)
    {
        str='0'+str;
    }
    
    return str;
}

document.onclick=function (ev)
{
    var oEvent=ev||event;
    var t=oEvent.clientY;
    var l=oEvent.clientX;
    var oRedDiv=document.createElement('div');
    
    oRedDiv.style.width = "4px";
    oRedDiv.style.height = "30px";
    oRedDiv.style.background = "red";
    oRedDiv.style.top = document.documentElement.clientHeight + "px";
    oRedDiv.style.left = oEvent.clientX + "px";
        
    document.body.appendChild(oRedDiv);
    
    var timer = setInterval(function(){
        oRedDiv.style.top = oRedDiv.offsetTop - 20 + "px";
        
        if(oRedDiv.offsetTop <= t){
            clearInterval(timer);
            document.body.removeChild(oRedDiv);
            
            var i=0;
            var aDiv = [];
            
            for(i=0;i<50;i++){
                var oDiv = document.createElement("div");
                
                oDiv.style.background = "#"+getRndAndFillZero();
                oDiv.style.width = "2px";
                oDiv.style.height = "2px";
                oDiv.style.left = l+"px";
                oDiv.style.top = t+"px";    
                document.body.appendChild(oDiv);
                aDiv.push(oDiv);
                
                oDiv.speedX = Math.random() * 40 - 20;
                oDiv.speedY = Math.random() * 40 - 20;
            }
            
            var newTimer = setInterval(function(){
                var count = 0;
                for(i=0;i<aDiv.length;i++){
                    if(!aDiv[i]) continue;
                    
                    aDiv[i].style.left = aDiv[i].offsetLeft + aDiv[i].speedX+"px";
                    aDiv[i].style.top = aDiv[i].offsetTop + aDiv[i].speedY+"px";
                    aDiv[i].speedY++;
                    if(aDiv[i].offsetLeft<0||aDiv[i].offsetLeft>document.documentElement.clientWidth || aDiv[i].offsetTop>document.documentElement.clientHeight){
                        document.body.removeChild(aDiv[i]);    
                        aDiv[i] = null;
                    }
                    count++;
                }
                    
                if(count==0){
                    clearInterval(newTimer);    
                }
                
            },30);
            
            var flashCount=0;
            var flashBackground=setInterval(function (){
                if(flashCount++%2)
                {
                    document.body.style.background='#CCC';
                }
                else
                {
                    document.body.style.background='black';
                }
                
                if(flashCount>2)
                {
                    clearInterval(flashBackground);
                }
            }, 30);
        }
    }, 30);
};
</script>