Este exemplo de artigo descreve o método do JS nativo para obter um efeito simples de explosão de fogos de artifício. Compartilhe para sua referência. A análise específica é a seguinte:
Princípio da implementação: dentro de um determinado intervalo, gerar aleatoriamente algumas divs para formar um efeito de fogos de artifício
Copie o código da seguinte forma: <! Doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Efeito de fogos de artifício JS </ititure>
<script type = "text/javascript">
Document.OnClick = function (EV)
{
var oevent = EV || Evento;
var adiv = [];
var odiv = nulo;
var _odiv = document.createElement ('div');
var i = 0;
var x = oevent.clientX;
var y = oevent.clienty;
_odiv.style.Position = 'Absolute';
_odiv.style.background = 'vermelho';
_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);
mostrar();
document.body.removeChild (_odiv);
}
_odiv.style.top = _odiv.offsetTop-30+'px';
}, 30);
função show ()
{
var odiv = nulo;
para (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);
função domove ()
{
para (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>
</head>
<Body style = "Overflow: Hidden; Background: Black;">
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.