この記事の例では、単純な花火の爆発効果を実現するためのネイティブJSの方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
実装の原則：特定の範囲内で、いくつかのdivをランダムに生成して花火効果を形成します
次のようにコードをコピーします：<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<Title> JS花火効果</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;
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] .Offsetp> document.documentelement.clientheight）
{
document.body.removechild（adiv [i]）;
adiv.splice（i、1）;
}
}
}
};
</script>
</head>
<ボディスタイル= "オーバーフロー：隠し;背景：black;">
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。