原生js实现烟花效果（简单版）

引入封装好的comment.js

/**
 *
 *获取随机整数--返回 min（包含）～ max（包含(+1)）之间的数字
 * @param {*} min 最小值
 * @param {*} max 最大值(加1包括最大值,不加1不包括最大值)
 * @return {*} 返回一个随机整数
 */
function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}


/**
 *获取随机的十六进制颜色
 *toString(16)转成十六进制
 * @return {*}  一个七位字符串(包括#)
 */
function getColor() {
    let res = "#";
    for (let i = 0; i < 6; i++) {
        res += getRndInteger(0, 15).toString(16);
    }
    return res;
}


/**
 *
 *英文日期格式转换为字符串
 * @param {*} param 参数为一个英文日期
 * @return {*}  返回一个字符串
 */
function formaDate(param) {
    let d = new Date(param);
    let year = d.getFullYear();
    let month = d.getMonth() + 1;
    let date = d.getDate();
    if (month < 10) {
        month = '0' + month;
    }
    if (date < 10) {
        date = '0' + date;
    }
    return year + '-' + month + '-' + date;
}

/**
 *
 *获取当前时间
 * @return {*} 返回当前时间具体到秒
 */
function showTime() {
    let d = new Date();
    let year = d.getFullYear();
    let month = d.getMonth();
    let date = d.getDate();
    if (month < 10) {
        month = '0' + month;
    }
    if (date < 10) {
        date = '0' + date;
    }
    let hours = d.getHours();
    let minute = d.getMinutes();
    let second = d.getSeconds();
    return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second;
}

/** @type {*} 数字0-9与中文零到九之间的对应 */
let numbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];

/**
 *
 * 封装函数可以转换 年份
 * @param {*} year  参数为年份
 * @return {*}  返回中文年份
 */
function formatYear(year) {
    year = String(year);
    let result = '';
    for (let i = 0; i < year.length; i++) {
        result += numbers[year[i]]; // year[i] 取出为数字
    }
    return result;
}

/**
 *
 * 封装函数可以转换年份里的其他数字
 * @param {*} str 年份外剩余的数字
 * @return {*} 返回中文字符
 */
function formatOther(str) {
    let result = '';
    if (str > 0 && str < 10) {
        result = numbers[str];
    } else if (str == 10) {
        result = '十';
    } else if (str > 10 & str < 20) {
        let last = str % 10;
        result = '十' + numbers[last];
    } else {
        let first = parseInt(str / 10);
        let second = str % 10;
        result = numbers[first] + '十';
        if (second != 0) {
            result += numbers[second];
        }
    }
    return result;
}

/**
 *
 *获取到被选中的单选框value值
 * @param {*} element 单选框的dom对象集合 
 * @return {*} 返回该元素的value
 */
function getRadioChecked(elements) {
    for (let i = 0; i < elements.length; i++) {
        if (elements[i].checked) {
            return elements[i].value;
        }
    }
}


/**
 * dom对象.style 获取样式时不能获取到内嵌/外联样式,所以要使用getComputedStyle()
 * 获取元素的样式 包含行内与内嵌的样式
 * @param {*} elem dom对象
 * @param {*} attr 样式名称
 * @return {*}  string 样式值的字符串
 */
function getStyle(elem, attr) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(elem)[attr];
    }
    return elem.currentStyle[attr];
}

/**
 *实现多个属性同时从当前位置运行到指定的位置
 *
 * @param {*} elem 代表着运动的dom对象
 * @param {*} target 为对象格式 属性名称使用样式名称 属性值使用 修改的目标点  属性值不用写单位px
 * @param {*} callback 结束运动函数
 */
function move(elem, target, callback) {
    let timerFlag = {}; // 标识对象
    for (let attr in target) {

        timerFlag[attr] = setInterval(function () { // 创建定时器时返回的标识使用对象保存

            let currentStyle;

            if (attr == 'opacity') { // 针对透明度单独进行判断 处理数据
                currentStyle = parseFloat(getStyle(elem, attr) * 100); // 由于需要将透明度放大100倍
            } else {
                currentStyle = parseInt(getStyle(elem, attr));
            }

            let speed = (target[attr] - currentStyle) / 5; // 需要计算出此次需要运动的距离为多少

            if (speed > 0) {
                speed = Math.ceil(speed); // 正数表示正向运动 向上取整
            } else {
                speed = Math.floor(speed); // 负数表示向下运动 向下取整
            }

            if (currentStyle == target[attr]) { // 判断当前的值是否已经达到了目标

                clearInterval(timerFlag[attr]); // 已经达到了
                delete timerFlag[attr]; // 删除属性
                if (getObjAttrLength(timerFlag) == 0) { // 每次关闭定时器都有可能运动结束，因此需要判断
                    callback && callback();
                }

            } else {
                if (attr == 'opacity') {
                    elem.style[attr] = (currentStyle + speed) / 100;
                } else {
                    elem.style[attr] = currentStyle + speed + 'px';
                }
            }
        }, 30);
    }
}

/**
 *计算对象下的属性
 *
 * @param {*} obj 对象
 * @return {*}  返回对象下属性的个数
 */
function getObjAttrLength(obj) {
    let n = 0;
    for (let i in obj) {
        n++;
    }
    return n;
}


/** @type {*} 事件对象跨浏览器方案 */
var EventUtil = {
    //事件绑定(事件监听方式)
    // element dom对象
    // type    事件类型
    // handler 处理程序(方法)
    addEventListener: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler; //[]计算属性名
        }
    },
    //返回对event对象的引用
    getEvent: function (event) {
        return event ? event : window.event;
    },
    //返回事件目标
    getTarget: function (event) {
        return event.target || event.srcElement;
    },
    //阻止事件的默认行为
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false; //兼容Ie低版本
        }
    },
    //移除事件
    removeEventListener: function (element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    //阻止事件冒泡 有可能事件冒泡和事件捕获两者同时阻止
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fire {
            width: 1000px;
            height: 600px;
            background: #000;
            border: 5px solid pink;
            margin: 30px auto;
            position: relative
        }

        div {
            width: 10px;
            height: 10px;
            position: absolute;
            background-color: aqua;
        }

        span {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: blueviolet;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="fire"></div>
</body>

</html>
<script src="js/comment.js"></script>
<script>
    let fireBox = document.querySelector(".fire");
    // console.log(fireBox)

    fireBox.onclick = function (e) {
        // console.log(111);
        let event = window.event || e;
        let x = event.offsetX;
        // console.log("event.offsetX" + x);
        let y = event.offsetY;
        // console.log("event.offsetY" + y);
        let div = document.createElement('div');
        div.style.top = '390px';
        div.style.left = x + 'px';
        div.style.borderRadius = 50 + '% ';
        fireBox.appendChild(div);

        function createFire() {
            if (parseInt(div.style.top) == y) {
                fireBox.removeChild(div);
                for (let i = 1; i < 15; i++) {
                    let span = document.createElement('span');
                    span.style.top = y + 'px';
                    span.style.left = x + 'px';
                    span.style.backgroundColor = getColor();
                    fireBox.appendChild(span);
                    let randLeft = getRndInteger(0, 600);
                    let randTop = getRndInteger(0, 400);

                    move(span, {
                        left: randLeft,
                        top: randTop
                    }, () => {
                        fireBox.removeChild(span);

                    });
                }

            }
        }

        move(div, {
            top: y
        }, createFire);

    }
</script>

效果：