源码
复制粘贴代码 在同级别下放一张图片fire.png接可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>烟花特效</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #000;
}
.aniAvtive{
animation: bloom 2s ease-in-out infinite;
}
@keyframes bloom {
0%{
transform: scale(0);
filter: hue-rotate(0deg);
}
80%,100%{
transform: scale(1.5);
filter: hue-rotate(180deg);
}
}
</style>
</head>
<body>
<button class="but">暂停自动绽放</button>
<button class="start">开启自动绽放</button>
<script>
//返回随机值的函数
function getBodyWidthRand(size){
//获取body的宽高
let bodyObj=document.querySelector("body")
let w=bodyObj.clientWidth-size
return Math.ceil(Math.random()*w)
}
function getBodyHeightRand(size){
//获取body的宽高
let bodyObj=document.querySelector("body")
let h=bodyObj.clientHeight-size
return Math.ceil(Math.random()*h)
}
function getImgSizeArea(max,min){
return Math.ceil(Math.random()*(max-min)+min)
}
//生成绽放的烟花
function makeFireFlower(){
//性能优化 节点利用
if (document.body.children.length>=10) {
//获取第一个我node的img
let list=Array.from(document.body.children)
for (let i = 0; i < list.length; i++) {
if (list[i].style.display==="none") {
list[i].style.display="block"
//设置图片的位置
list[i].style.position="absolute"
//随机值
let size =getImgSizeArea(600,200)
list[i].style.top=getBodyHeightRand(size)+"px"
list[i].style.left=getBodyWidthRand(size)+"px"
list[i].style.width=size+"px"
list[i].style.height=size+"px"
setTimeout(()=>{
list[i].style.display='none'
},2000)
return
}
}
}else{
// 通过js来实现烟花的绽放
//创建一个IMG 元素 在添加到app中去
let imgobj= document.createElement("img")
//设置图片的地址
imgobj.src="./fire.png"
imgobj.onload=function(e){
//设置图片的位置
this.style.position="absolute"
//随机值
let size =getImgSizeArea(600,200)
this.style.top=getBodyHeightRand(size)+"px"
this.style.left=getBodyWidthRand(size)+"px"
this.style.width=size+"px"
this.style.height=size+"px"
//添加绽放的动画
this.classList.add("aniAvtive")
console.log(this.style.top,this.style.left);
setTimeout(()=>{
this.style.display='none'
},2000)
document.body.appendChild(this)
}
}
}
//自动生成绽放的烟花
let timer = setInterval(()=>{
makeFireFlower()
},500)
//获取
let butobj=document.querySelector(".but")
butobj.onclick=function(){
clearInterval(timer)
}
let startobj=document.querySelector(".start")
startobj.onclick=function(){
timer = setInterval(()=>{
makeFireFlower()
},500)
}
//手动绽放
document.body.onclick=function(e){
makeFireFlower()
}
//优化性能 定时清楚无用的img
//此方式 需要调用定时器 ,不停的创建和删除元素 有性能浪费
//优化成了 节点利用
// let timer1 = setInterval(()=>{
// if (document.body.children.length>=7) {
// document.body.removeChild(document.body.children[0])
// }
// },500)
</script>
</body>
</html>
功能拆分
获取随机值 在视口可见区域
//返回随机值的函数
function getBodyWidthRand(size){
//获取body的宽高
let bodyObj=document.querySelector("body")
let w=bodyObj.clientWidth-size
return Math.ceil(Math.random()*w)
}
function getBodyHeightRand(size){
//获取body的宽高
let bodyObj=document.querySelector("body")
let h=bodyObj.clientHeight-size
return Math.ceil(Math.random()*h)
}
返回随机的图片大小范围
function getImgSizeArea(max,min){
return Math.ceil(Math.random()*(max-min)+min)
}
生成img 插入body中
function makeFireFlower(){
//性能优化 节点利用
if (document.body.children.length>=10) {
//获取第一个我node的img
let list=Array.from(document.body.children)
for (let i = 0; i < list.length; i++) {
if (list[i].style.display==="none") {
list[i].style.display="block"
//设置图片的位置
list[i].style.position="absolute"
//随机值
let size =getImgSizeArea(600,200)
list[i].style.top=getBodyHeightRand(size)+"px"
list[i].style.left=getBodyWidthRand(size)+"px"
list[i].style.width=size+"px"
list[i].style.height=size+"px"
setTimeout(()=>{
list[i].style.display='none'
},2000)
return
}
}
}else{
// 通过js来实现烟花的绽放
//创建一个IMG 元素 在添加到app中去
let imgobj= document.createElement("img")
//设置图片的地址
imgobj.src="./fire.png"
imgobj.onload=function(e){
//设置图片的位置
this.style.position="absolute"
//随机值
let size =getImgSizeArea(600,200)
this.style.top=getBodyHeightRand(size)+"px"
this.style.left=getBodyWidthRand(size)+"px"
this.style.width=size+"px"
this.style.height=size+"px"
//添加绽放的动画
this.classList.add("aniAvtive")
console.log(this.style.top,this.style.left);
setTimeout(()=>{
this.style.display='none'
},2000)
document.body.appendChild(this)
}
}
}
自动执行make烟花的函数
//自动生成绽放的烟花
let timer = setInterval(()=>{
makeFireFlower()
},500)
效果
