源码
复制粘贴代码 在同级别下放一张图片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-sizereturn Math.ceil(Math.random()*w)}function getBodyHeightRand(size){//获取body的宽高let bodyObj=document.querySelector("body")let h=bodyObj.clientHeight-sizereturn 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的imglet 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-sizereturn Math.ceil(Math.random()*w)}function getBodyHeightRand(size){//获取body的宽高let bodyObj=document.querySelector("body")let h=bodyObj.clientHeight-sizereturn 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的imglet 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)
效果
