原生js放烟花

 效果图

 

 <style>
*{
    margin: 0;
    padding: 0;
    
}
body,html{
    height: 100%;
}
    </style>

body中不用写结构，全部由js动态创建

<script src="js/utils.js"></script>
<script>
function Firework(){
     this.box=document.createElement('div')
     document.body.appendChild(this.box)
     setStyle(this.box,{
        width: '100%',
        height: '100%',
        boxSizing:'border-box',
        border: '10px solid purple',
        background: 'linear-gradient(black,blue)',
        position: 'relative'
     })
     this.createfire()
}

//创建烟花
Firework.prototype.createfire=function(){
    this.box.onclick=(e)=>{
        var x=e.offsetX
        var y=e.offsetY
        var fire=document.createElement('div')
        setStyle(fire,{
            width: '10px',
            height: '10px',
            backgroundColor: getColor(16),
            position: 'absolute',
            borderRadius:'50%',
            left: x + 'px',
            top:this.box.clientHeight-10+'px'
      })
        this.box.appendChild(fire)

        //调用运动函数
        animate(fire,{
            top:y
        },
        ()=>{
            this.box.removeChild(fire)
            //随机创建多个小烟花
            let num=getRandom(30,40)
            for(let i=0;i<=num;i++){
                let fire=document.createElement('div')
                setStyle(fire,{
                width: '15px',
                height: '15px',
                backgroundColor: getColor(16),
                position: 'absolute',
                borderRadius:'50%',
                left: x + 'px',
                top:y+'px'
      })
                this.box.appendChild(fire)
                animate(fire,{
                    left:getRandom(0,this.box.clientWidth-fire.clientWidth),
                    top:getRandom(0,this.box.clientHeight-fire.clientHeight)
                },
                ()=>{
                    this.box.removeChild(fire)
                })

            }
        }
        )
    }
    
}

new Firework()

3.需要调用js插件库

文章链接：js插件库