В этом примере статьи описывается метод нативного JS для достижения простого эффекта взрыва фейерверка. Поделитесь этим для вашей ссылки. Конкретный анализ заключается в следующем:
Принцип реализации: В пределах определенного диапазона случайным образом генерируйте некоторые DOV, чтобы сформировать эффект фейерверка
Скопируйте код следующим образом: <! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<Title> JS Firework 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);
показывать();
document.body.removechild (_odiv);
}
_odiv.style.top = _odiv.offsettop-30+'px';
}, 30);
Функция show ()
{
var Odiv = null;
для (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);
Функция Domove ()
{
для (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 = "переполнение: скрыто; фон: черный;">
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.