js achieve the effect of fireworks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #container{
            width: 80%;
            height: 600px;
            border: 2px solid red;
            background: #000;
            margin:20px auto;
            cursor: pointer;
            position: relative;
            left: 0;
            top: 0;
            overflow: hidden;
        }
        .fire{
            width: 10px;
            height:10px;
            position: absolute;
            bottom: 0;
        }
        .small-fire{
            width: 10px;
            height:10px;
            position: absolute;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="container"></div>
</body>
<script src="../move.js"></script>
<script>

    function Fire(options){
        this.x = options.x;
        this.y = options.y;
        this.cont = options.parent;

        // 1. Create body fireworks, styling, position 
        the this .init () 
    } 
    Fire.prototype.init = function () {
         // body fireworks, styling, position 
        the this .ele = document.createElement ( "div" );
         the this .ele.className = "Fire" ;
         the this .ele.style.left = the this .x + "PX" ;
         the this .ele.style.background = randomcolor ();
         the this .cont.appendChild ( the this .ele) 

        // 2. to start exercising end 
        the this .animate () 
    } 
    Fire.prototype.animate =function () {
         // start moving. . . 
        the Move ( the this .ele, { 
            Top: the this .y 
        }, function () {
             // delete the main fireworks 
            the this .ele.remove ()
             // 3. Create a small fireworks 
            the this .createSmall () 
        } .bind ( the this )) 
    } 
    Fire.prototype.createSmall = function () {
         // create a small fireworks, movement, deletion 
        var NUM = random (10,20 ); 

        // 1. random radius 
        var R & lt = random (100,200 );
        console.log(num)
        for(var i=0;i<num;i++){
            let div = document.createElement("div");
            div.className = "small-fire";
            div.style.background = randomColor();
            div.style.left = this.x + "px";
            div.style.top = this.y + "px";
            div.setAttribute("i",i);
            this.cont.appendChild(div);

            // 2.Trigonometric function, calculate the coordinates of points evenly distributed above a circle 
            note trigonometric method of received radians: Do not forget degrees to radians//
            var l = parseInt(Math.cos( Math.PI/180 * (360/num * i)) * r) + this.x;
            var t = parseInt(Math.sin( Math.PI/180 * (360/num * i)) * r) + this.y;

            move(div,{
                left:l,
                top:t
            },function(){
                div.remove()
            })
            
        }
    }



    // for(){
    //     ali[i] = i
    //     ali[i].onclick = function(){
    //         this
    //     }
    // }



// 范围随机数
function random(max,min){
    return Math.round(Math.random()*(max-min)+min);
}

// 随机颜色
function randomColor(){
    return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
}


    var ocont = document.getElementById("container");
    ocont.onclick = function(eve){
        var e = eve || window.event;
        new Fire({
            x:e.offsetX,
            y:e.offsetY,
            parent:this
        });
    }

</script>
</html>

//移动
function move(ele,json,callback){
    clearInterval(ele.t);
    ele.t = setInterval(() => {
        var onoff = true;
        for(var i in json){
            var iNow = parseInt(getStyle(ele,i));
            var speed = (json[i] - iNow)/6;
            speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
            if(iNow != json[i]){
                onoff = false;
            }
            ele.style[i] = iNow + speed + "px";
        }
        if(onoff){
            clearInterval(ele.t);
            callback && callback();
        }
    }, 30);
}
function getStyle(ele,attr){
    if(ele.currentStyle){
        return ele.currentStyle[attr];
    }else{
        return getComputedStyle(ele,false)[attr];
    }
}

js achieve the effect of fireworks

Guess you like