Cet exemple d'article décrit la méthode de JS native pour réaliser un effet d'explosion de feu d'artifice simple. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Principe de mise en œuvre: dans une certaine plage, générez des divs au hasard pour former un effet de feu d'artifice
Copiez le code comme suit: <! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> JS Effet de feu d'artifice </TITAL>
<script type = "text / javascript">
document.onclick = fonction (ev)
{
var oevent = ev || événement;
var adiv = [];
var odiv = null;
var _odiv = document.createElement ('div');
var i = 0;
var x = oevent.clientx;
var y = oevent.clienty;
_odiv.style.position = 'absolue';
_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);
montrer();
document.body.removechild (_odiv);
}
_odiv.style.top = _odiv.offsettop-30 + 'px';
}, 30);
fonction show ()
{
var odiv = null;
pour (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 = 'absolue';
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.ApendChild (ODIV);
adiv.push (odiv);
}
}
setInterval (Domove, 30);
Function Domove ()
{
pour (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);
}
}
}
};
</cript>
</ head>
<Body Style = "Overflow: Hidden; Background: Black;">
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.