效果图
<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插件库