js to achieve cool fireworks effect

/*Set the css style for the canvas*/
#container {
        width: 80%;
        height: 600px;
        border: 1px red solid;
        position: relative;
        margin: 20px auto;
        cursor: pointer;
        background: black;
    }
<!-- Set up a div -->
<div id="container"></div>

 //Get the node var app = document.getElementById('container');
        //Set a binding event for app app.onclick = function(event) {
                var e = event || window.event
               //Get the coordinates of the mouse click position var pos = {
                    cy: e.offsetY,
                    cx: e.offsetX
                }
                new Fire(app, pos)
            }

// Constructor function Fire(app, pos) {
            //Set the property to the variable this.app = app;
            this.pos = pos;
            // Create a large div
            this.bf = document.createElement('div');
            //Set a class name this.bf.className = 'fire';
            //Set style this.bf.style.left = this.pos.cx + 'px';
            this.bf.style.background = this.getColor();
            this.app.appendChild(this.bf);
            //Call the motion function this.move(this.bf, {
                top: this.pos.cy
            }, () => {
                this.bf.remove();
                this.smallFire();
            })
        }

 .fire {
        background: red;
        position: absolute;
        /* When setting bottom, top is obtained as the maximum value, minus the mouse click position*/
        bottom: 0px;
        width: 6px;
        height: 6px;
    }

//Get a random number method Fire.prototype.rand = function(min, max) {
            return Math.round(Math.random() * (max - min) + min);
        }
 
 
//Method to get a random color Fire.prototype.getColor = function() {
         let sum = '#';
         for (let i = 0; i < 6; i++) {
               sum += this.rand(0, 15).toString(16)
           }
             return sum;
           }

Fire.prototype.move = function(ele, target, cb) {
                // clearInterval(times);
                let times = setInterval(function() {
                    // console.log(this);
                    var onOff = true;
                    // Traverse the direction and target of the movement for (let attr in target) {
                        // attr represents the attribute of the movement // console.log(attr);
                        // Get the real-time value of the element attribute let tmpVal = parseInt(this.getPos(ele, attr))
                            // Calculate speed
                            // console.log(tmpVal, attr);
                        let speed = (target[attr] - tmpVal) / 10;
                        // Round speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        // Stop the timer, when an attribute moves to position, set the switch state if (tmpVal == target[attr]) onOff = true;
                        // Make the element move ele.style[attr] = tmpVal + speed + 'px';
                    }
 
                    // Determine the switch status and clear the timer for (var moveAttr in target) {
                        // If they are not equal, it means that some attributes have not moved to the position and the timer cannot be stopped if (target[moveAttr] !== parseInt(this.getPos(ele, moveAttr))) {
                            onOff = false;
                            break;
                        }
                    }
                    if (onOff) {
                        clearInterval(times);
                        cb && cb();
                    }
                    // console.log(1111);
                }.bind(this), 30)
            }
            // Function to get the real-time position of an element Fire.prototype.getPos = function(obj, attr) {
            if (obj.currentStyle) { // Get the CSS style return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj)[attr]
            }
        }

.small-fire {
        width: 10px;
        height: 10px;
        position: absolute;
        border-radius: 50%;
    }

//Small fireworks Fire.prototype.smallFire = function() {
            //First, we set the number of small fireworks let num = this.rand(50, 60)
            //Traverse and set different styles for each small firework for (let i = 0; i < num; i++) {
                let sf = document.createElement('div');
                sf.className = 'small-fire';
                sf.style.left = this.pos.cx + 'px';
                sf.style.top = this.pos.cy + 'px';
                sf.style.background = this.getColor();
                //console.log(sf);
                //Append to the page this.app.appendChild(sf);
                //Make the trajectory of the small fireworks into a circular motion//var top = parseInt(Math.sin(Math.PI / 180 * 360 / num * i) * r) + this.pos.cy;
                //var left = parseInt(Math.cos(Math.PI / 180 * 360 / num * i) * r) + this.pos.cx;
                 //Give the small firework a random position, which can be any position in the canvas let top = this.rand(0, this.app.offsetHeight - sf.offsetHeight);
                 let left = this.rand(0, this.app.offsetWidth - sf.offsetWidth);
                //Call the motion function this.move(sf, {
                    top: top,
                    left: left
                }, function() {
                    sf.remove();
                })
            }
}