This paper illustrates the method of realizing simple fireworks explosion effect by native JS. Share to everyone for your reference. The specific analysis is as follows:
Implementation principle: Within a certain range, randomly generated some div, the formation of fireworks effect
<!doctype html>
<meta charset= "Utf-8" >
<title>js Fireworks Effect </title>
<script type= "Text/javascript" >
Document.onclick=function (EV)
{
var oevent=ev| | Event
var adiv=[];
var odiv=null;
var _odiv=document.createelement (' div ');
var i=0;
var X=oevent.clientx;
var Y=oevent.clienty;
_odiv.style.position= ' absolute ';
_odiv.style.background= ' Red ';
_odiv.style.width= ' 3px ';
_odiv.style.height= ' 30px ';
_odiv.style.left=oevent.clientx+ ' px ';
_odiv.style.top=document.documentelement.clientheight+ ' px ';
Document.body.appendChild (_ODIV);
var t=setinterval (function () {
if (_odiv.offsettop<=y)
{
Clearinterval (t);
Show ();
Document.body.removeChild (_ODIV);
}
_odiv.style.top=_odiv.offsettop-30+ ' px ';
}, 30);
Function Show ()
{
var odiv=null;
for (i=0;i<100;i++)
{
Odiv=document.createelement (' div ');
Odiv.style.width= ' 3px ';
odiv.style.height= ' 3px ';
odiv.style.background= ' # ' +math.ceil (Math.random () *0xefffff+0x0fffff). toString (16);
odiv.style.position= ' absolute ';
odiv.style.left=x+ ' px ';
odiv.style.top=y+ ' px ';
var a=math.random () *360;
Odiv.speedx=math.random () *40-20;
Odiv.speedy=math.random () *40-20;
Odiv.speedx=math.sin (A*180/MATH.PI) *20*math.random ();
Odiv.speedy=math.cos (A*180/MATH.PI) *20*math.random ();
Document.body.appendChild (ODIV);
Adiv.push (ODIV);
}
}
SetInterval (Domove, 30);
function Domove ()
{
for (i=0;i<adiv.length;i++)
{
adiv[i].style.left=adiv[i].offsetleft+adiv[i].speedx+ ' px ';
adiv[i].style.top=adiv[i].offsettop+adiv[i].speedy+ ' px ';
Adiv[i].speedy+=1;
if (adiv[i].offsetleft<0 | | adiv[i].offsetleft>document.documentelement.clientwidth | | aDiv[i].offsetTop<0 || Adiv[i].offsettop>document.documentelement.clientheight)
{
Document.body.removeChild (Adiv[i]);
Adiv.splice (i, 1);
}
}
}
};
</script>
<body style= "Overflow:hidden; Background:black; " >
</body>
I hope this article will help you with your JavaScript programming.
