纯js烟花效果

最新推荐文章于 2024-07-25 11:15:00 发布

Maple－轩

最新推荐文章于 2024-07-25 11:15:00 发布

阅读量1.1k

点赞数 1

分类专栏： web 文章标签：烟花 web js

本文链接：https://blog.csdn.net/qq_39064548/article/details/83935196

版权

web 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!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>