烟花效果（随机抛物线）

烟花爆炸效果（随机抛物线）

css部分

  	html,body{
        height: 100%;
        overflow: hidden;//隐藏落在屏幕外面的烟花
    }
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        position: absolute;
    }
    .hanabi{
        position: absolute;
        width: 4px;
        height: 4px;
    }
    .lead{
        position: absolute;
        width: 4px;
        height: 4px;
        background-color: red;
        left: 48px;
    }

js部分

function animated(element,targetObject,speed,callback){//element 变化的元素  传入目标对象 targetObject callback 回调函数
        clearInterval(element.timer)
        if(typeof speed !='number'){
            speed = Number(speed)
            if(isNaN(speed)){
                speed = 0
            }
        }
        //遍历目标对象 查看里面需要变化的内容 {"width":100,"height":100,opacity":1,"zIndex":1}
        element.timer = setInterval(()=>{
            let flag = true
            for(let key in targetObject){
              let current = parseFloat(getStyle(element,key))
              let step = 0
              //判断传进来的值
              if(key=="opacity"){//如果是opacity是使用下面这个
                  //不需要px作为单位
                  //目标元素 targetObject[key]  当前的值 Number(getStyle(element,key)) 步长
                  step = (targetObject[key]*100-current*100)/10 //保证最终达到目标位置
                  element.style[key] = (current*100+step)/100
              }
              if(key=="zIndex"){//如果是层高 直接设置
                 element.style[key] = targetObject[key]
              }
              if(key!="opacity" && key!="zIndex"){ //height width left top
                step = (targetObject[key]-current)/10>0?Math.ceil((targetObject[key]-current)/10):Math.floor((targetObject[key]-current)/10)
                element.style[key] = current+step+'px'
              }
              if(parseFloat(getStyle(element,key))!=targetObject[key]){//如果某个没有设置完
                    flag = false
              }
            }
            if(flag){
                clearInterval(element.timer)
                //执行对应的callback
                if(typeof callback =='function'){//如果你是个函数
                    //执行这个函数
                    callback()
                }
            }
        },speed)
        //callback是所有的这个函数里面所有的事情做完以后做的事情
    }
    //获取样式的值
    function getStyle(element,attr){ //需要获取样式的对象  样式的名字
        // window.getComputedStyle(element,null)[attr]
        // element.currentStyle ie的兼容写法
        //获取样式对象
        var style = window.getComputedStyle?window.getComputedStyle(element,null):element.currentStyle
        return style[attr]
    }
let box = document.querySelector('.box');
window.onclick = function (e){
    //添加一个有position的父盒子
    let box = document.createElement('div');
    box.className = 'box'
    document.body.append(box)
    box.style.left = e.clientX+'px';
    box.style.top = e.clientY+'px';
    //相当于引线
    let a = document.createElement('div');
    a.className = 'lead';
    document.body.append(a);
    a.style.left = e.clientX+'px';
    a.style.top = window.innerHeight +'px';
    //利用上面定义的运动函数来进行移动
    animated(a,{'top':e.clientY},40, function (){
        a.remove()
        let num = Math.floor(Math.random()*20+180);
        for (let i = 0; i < num; i++) {
            let fire = document.createElement('div');
            fire.className = 'hanabi';
            box.append(fire);
            //颜色随机
            let d = Math.floor(Math.random()*256);
            let b = Math.floor(Math.random()*256);
            let c = Math.floor(Math.random()*256);
            fire.style.backgroundColor = 'rgb('+d+','+b+','+c+')'
            //角度随机，初速度随机
            let a = Math.round(Math.random()*360)*Math.PI/180
            let v = Math.round(Math.random()*30+30)
            //定义时间
            let t = 0;
            fire.timer = setInterval(function (){
                //时间每次加0.1，方便观察轨迹
                t = t+0.1
                //x轴，y轴运动方程
                let X = v*Math.cos(a)*t;
                let Y = -(v*Math.sin(a)*t - (9.8*Math.pow(t,2))/2)
                fire.style.left = X+'px'
                fire.style.top = Y+'px'
                if (Y>=(window.innerHeight-e.clientY)){
                    clearInterval(fire.timer)
                    fire.remove()
                }
            },10)
        }
    })
    //设置延时器清除box
    setTimeout(function (){
        box.remove()
    },4000)
}