js简单实现烟花效果

用js写的一个简单的烟花效果。

需要用到自己封装的move运动函数，在别的随笔里有封装好的，直接调用就行。

效果图：

 

 

js代码：

<script type="text/javascript">
function Fire(){
    // 创建一个夜空
    this.night = document.createElement("div");
    this.setStyle(this.night,{
        width:"1000px",
        height:"500px",
        "background-color":"#000",
        border:"red solid 10px",
        position:"relative"
    })
    // 将这个夜空放到body中显示
    document.body.appendChild(this.night)
    // 给夜空绑定单击事件
    this.night.onclick = e=>{
        var e = e || window.event;
        var x = e.offsetX;
        var y = e.offsetY;
        this.createOneFire(x,y)
    }
}
// 创建一个小火花
Fire.prototype.createOneFire = function(x,y){
    // 创建一个小火花
    var div = document.createElement("div");
    this.setStyle(div,{
        width:"10px",
        height:"10px",
        backgroundColor:this.getColor(),
        position:"absolute",
        left:x + "px",
        bottom:0
    });
    // 将这个小火花放到夜空中
    this.night.appendChild(div)
    
    // 让这个小火花开始运动 - 上升到指定的位置
    move(div,{top:y},()=>{
        // 将上来的这个小火花干掉
        div.parentElement.removeChild(div);
        // 创建很多小火花
        this.createMayFire(x,y)
    })
}
Fire.prototype.createMayFire = function(x,y){
    // 获取一个随机数
    var num = this.getRandom(100,150);
    // 定义一个数组
    // 通过循环创建多个小火花
    for(let i=0;i<num;i++){
        let div = document.createElement("div");
        // 将创建好的div放在预置的数组中
        div.setAttribute("aaa",i)
        this.setStyle(div,{
            width:"10px",
            height:"10px",
            backgroundColor:this.getColor(),
            position:"absolute",
            left:x + "px",
            top:y + "px",
            borderRadius:"50%"
        });
        this.night.appendChild(div)
        // 获取随机left
        var l = this.getRandom(0,this.night.clientWidth-10);
        // 获取随机top
        var t = this.getRandom(0,this.night.clientHeight-10);
        move(div,{left:l,top:t},()=>{
            // 删除很多个小火花
            div.parentElement.removeChild(div)
        })
    }
}
// 获取随机颜色的方法
Fire.prototype.getColor = function(){
    return `rgb(${this.getRandom(0,256)},${this.getRandom(0,256)},${this.getRandom(0,256)})`
}
// 获取随机数的方法
Fire.prototype.getRandom = function(a,b){
    return Math.floor(Math.random()*(a-b))+b;
}
// 设置样式的方法
Fire.prototype.setStyle = function(ele,styleObj){
    for(var attr in styleObj){
        ele["style"][attr] = styleObj[attr];
    }
}
var f = new Fire()
</script>