煙花效果圖如下：

煙花效果

代碼如下：
工具函數(shù)

// 獲取隨機顏色的函數(shù)
function getColor(){
    var color = '#';
    for(var i=0;i<3;i++){
        var hex = getRandom(256).toString(16)
        hex = hex.length===1?'0'+hex:hex;
        color += hex
    }
    return color
}
// 獲取隨機數(shù)的函數(shù)
function getRandom(a, b = 0){
    var max = a;
    var min = b;
    if(a<b){
        max = b;
        min = a;
    }
    return Math.floor(Math.random() * (max - min)) + min
}
// 設置樣式的函數(shù)
function setStyle(ele, styleObj){
    for(var attr in styleObj){
        ele.style[attr] = styleObj[attr]
    }
}

實現(xiàn)效果的代碼：

// 創(chuàng)建夜空大盒子
var nightSky = document.createElement('div')
// 設置樣式
setStyle(nightSky, {
    width:"1000px",
    height:"500px",
    border:"10px solid #00f",
    backgroundColor:"#000",
    position:"relative"
})
// 將創(chuàng)建好的夜空放在body中
document.body.appendChild(nightSky)
// 點擊夜空
nightSky.onclick = function(){
    // 獲取光標在大盒子上的位置
    var e = window.event;
    var x = e.offsetX;
    var y = e.offsetY;
    // 創(chuàng)建一個小煙花div
    var fire = document.createElement('div')
    // 設置樣式
    setStyle(fire, {
        width:"10px",
        height:"10px",
        backgroundColor:getColor(),
        position:"absolute",
        left:x + 'px',
        bottom:0
    })
    // 將這個小煙花放在夜空中
    nightSky.appendChild(fire)
    // 讓這個小煙花升到空中
    toUp(fire,x,y)
}
// 讓小煙花升到空中
function toUp(fire,x,y){
    // 獲取小煙花的top值
    var t = fire.offsetTop;
    // 設置定時器讓top值逐漸減小
    var timerId = setInterval(function(){
        t -= 5
        // 當top值到了鼠標點擊的位置 - 就停止定時器
        if(t<=y){
            t = y
            clearInterval(timerId)
            // 將當前這個小煙花刪除掉
            nightSky.removeChild(fire)
            // 創(chuàng)建很多小煙花
            createManyFire(x,y)
        }
        // 將減小后的top設置給小煙花
        fire.style.top = t + 'px'
    },5)
}
// 創(chuàng)建很多小煙花
function createManyFire(x,y){
    // 獲取一個30~50的隨機數(shù)
    var num = getRandom(30,50)
    // 循環(huán)創(chuàng)建30~50個小煙花
    for(let i=0;i<num;i++){
        // 創(chuàng)建div
        let div = document.createElement('div')
        // 設置樣式
        setStyle(div, {
            width:"10px",
            height:"10px",
            backgroundColor:getColor(),
            position:"absolute",
            left:x + 'px',
            top: y + 'px',
            borderRadius:"50%"
        })
        // 將小煙花放到夜空中
        nightSky.appendChild(div)
        // 讓煙花炸開 - 將每個小div移動到隨機位置
        boom(div, x, y)
    }
}
// 小煙花炸開
function boom(ele, x, y){
    // 獲取一個隨機位置
    let targetPosition = {
        left:getRandom(nightSky.clientWidth-10),
        top:getRandom(nightSky.clientHeight-10)
    }
    // ele當前的位置
    let currentPosition = {
        left:x,
        top:y
    }
    // 讓left和top同時移動，就通過循環(huán)設置兩個定時器
    for(let attr in targetPosition){
        // 獲取每個定時器中使用的目標位置
        let target = targetPosition[attr]
        // 獲取每個定時器中使用的當前位置
        let currentStyle = currentPosition[attr]
        // 定義停止定時器數(shù)量
        var k = 0
        let timerId = setInterval(function(){
            // 定義每次移動的距離
            let percent = (target - currentStyle)/20
            // 如果小于0就向下取整變成整數(shù)丽旅，如果大于0就向上取整變成整數(shù)
            // -0.1 -- 1     0.2 -- 1   目的是讓div向前移動
            percent = percent>0?Math.ceil(percent):Math.floor(percent);
            // 讓當前的值跟計算好的距離相加
            currentStyle += percent;
            // 設置樣式
            ele.style[attr] = currentStyle + 'px'
            // 如果移動的值跟目標位置相等了
            if(currentStyle === target){
                // 停止當前定時器
                clearInterval(timerId)
                // 定時器停止數(shù)量自增
                k++
                // 當停止了2次定時器時
                if(k === 2){
                    // 將當前元素刪除
                    nightSky.removeChild(ele)
                }
            }
        },20)
    }
}