放烟花效果

烟花效果图如下：

烟花效果

代码如下：
工具函数

// 获取随机颜色的函数
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
}
// 获取随机数的函数
function getRandom(a, b = 0){
    var max = a;
    var min = b;
    if(a

实现效果的代码：

// 创建夜空大盒子
var nightSky = document.createElement('div')
// 设置样式
setStyle(nightSky, {
    width:"1000px",
    height:"500px",
    border:"10px solid #00f",
    backgroundColor:"#000",
    position:"relative"
})
// 将创建好的夜空放在body中
document.body.appendChild(nightSky)
// 点击夜空
nightSky.onclick = function(){
    // 获取光标在大盒子上的位置
    var e = window.event;
    var x = e.offsetX;
    var y = e.offsetY;
    // 创建一个小烟花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)
            // 创建很多小烟花
            createManyFire(x,y)
        }
        // 将减小后的top设置给小烟花
        fire.style.top = t + 'px'
    },5)
}
// 创建很多小烟花
function createManyFire(x,y){
    // 获取一个30~50的随机数
    var num = getRandom(30,50)
    // 循环创建30~50个小烟花
    for(let i=0;i0?Math.ceil(percent):Math.floor(percent);
            // 让当前的值跟计算好的距离相加
            currentStyle += percent;
            // 设置样式
            ele.style[attr] = currentStyle + 'px'
            // 如果移动的值跟目标位置相等了
            if(currentStyle === target){
                // 停止当前定时器
                clearInterval(timerId)
                // 定时器停止数量自增
                k++
                // 当停止了2次定时器时
                if(k === 2){
                    // 将当前元素删除
                    nightSky.removeChild(ele)
                }
            }
        },20)
    }
}