이 기사 예제는 간단한 불꽃 폭발 효과를 달성하기위한 원시 JS 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
구현 원칙 : 특정 범위 내에서 불꽃 효과를 형성하기 위해 일부 DIV를 무작위로 생성합니다.
다음과 같이 코드를 복사하십시오. <! doctype html>
<html>
<헤드>
<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 = '절대';
_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 (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 = '절대';
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 ()
{
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] .offSetTop> Document.DocumentElement.ClientHeight)
{
document.body.removechild (adiv [i]);
adiv.splice (i, 1);
}
}
}
};
</스크립트>
</head>
<바디 스타일 = "오버플로 : 숨겨진; 배경 : 검은 색;">
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.