ตัวอย่างบทความนี้อธิบายวิธีการของ JS ดั้งเดิมเพื่อให้ได้ผลการระเบิดของพลุ แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
หลักการการนำไปใช้: ภายในช่วงที่กำหนดให้สร้าง Divs บางตัวแบบสุ่มเพื่อสร้างเอฟเฟกต์ดอกไม้ไฟ
คัดลอกรหัสดังต่อไปนี้: <! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> JS Firework Effect </title>
<script type = "text/javascript">
document.onclick = function (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 = 'Absolute';
_odiv.style.background = 'สีแดง';
_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 (ฟังก์ชัน () {
if (_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 = 'สัมบูรณ์';
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
-
document.body.removechild (adiv [i]);
adiv.splice (i, 1);
-
-
-
-
</script>
</head>
<body style = "overflow: ซ่อน; พื้นหลัง: ดำ">
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน