يصف مثال المقالة طريقة JS الأصلية لتحقيق تأثير انفجار الألعاب النارية البسيطة. شاركه للرجوع إليه. التحليل المحدد هو كما يلي:
مبدأ التنفيذ: ضمن نطاق معين ، قم بإنشاء بعض divs بشكل عشوائي لتشكيل تأثير الألعاب النارية
انسخ الرمز كما يلي: <! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> JS تأثير الألعاب النارية </title>
<script type = "text/javaScript">
document.onclick = وظيفة (EV)
{
var oevent = ev || الحدث ؛
var adiv = [] ؛
var odiv = null ؛
var _odiv = document.createElement ('div') ؛
var i = 0 ؛
var x = oevent.clientx ؛
var y = oevent.clienty ؛
_odiv.style.position = 'aboRALUTE' ؛
_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 () {
إذا (_odiv.offsettop <= y)
{
ClearInterval (t) ؛
يعرض()؛
document.body.removechild (_odiv) ؛
}
_odiv.style.top = _odiv.offsettop-30+'px' ؛
} ، 30) ؛
عرض الوظيفة ()
{
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 = 'aboROMUTE' ؛
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]
adiv [i] .style.top = adiv [i] .OffSettop+adiv [i]
adiv [i] .peedy+= 1 ؛
if (adiv [i] .offsetLeft <0 || adiv [i] .offsetleft> document.documentElement.clientwidth || adiv [i]
{
document.body.removechild (adiv [i]) ؛
Adiv.Splice (i ، 1) ؛
}
}
}
} ؛
</script>
</head>
<body style = "overflow: Hidden ؛ الخلفية: أسود ؛">
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.