非常漂亮的js烟花效果
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了js实现非常漂亮的烟花效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现漂亮烟花效果的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>烟花</title>
<style type="text/css">
div>div{
width:10px;
height:10px;
border-radius: 50%;
position: absolute;
top:900px;
left:600px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"><div id="start"></div></div>
</body>
<script type="text/javascript">
var sta = 800;
var staa = 8;
var startid = setInterval(function (){
start.style.top = (sta-=staa)+"px";
staa -=0.06;
if(staa<=0.5){
clearInterval(startid);
start.style.display="none";
za();
}
},10);
var g = 0.01;
var lv = 0;
var times = 0;
var opa =1;
function za(){
addiv();
var s2 = setInterval(function(){
lv+=g;
for(var i=0;i<200;i++){
var elem = document.getElementById("d"+i);
elem.style.left = (arrl[i]+=(arrv[i]*Math.cos(arrr[i])))+"px";
elem.style.top = (arrt[i]+=(arrv[i]*Math.sin(arrr[i])+lv))+"px";
elem.style.opacity= (opa-=0.00001);
if(arrv[i]>0)
arrv[i]-=0.001;
else arrv[i]=0;
}
if(times++>=1000) clearInterval(s2);
},10);
}
var arrr = [];
var arrl = [];
var arrt = [];
var arrv = [];
var arro = []
function addiv(){
for(var i=0;i<200;i++){
box.innerHTML+="<div id='d"+i+"'></div>"
arrl[i]=600;
arrt[i]=sta;
arrv[i]=Math.random()*2+0.1;
arrr[i]=Math.random()*Math.PI*2;
}
}
</script>
</html>
更多JavaScript精彩特效分享给大家：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。