이 기사의 예에서는 기본 Js를 사용하여 간단한 불꽃놀이 폭발 효과를 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다. 구현 원리: 특정 범위 내에서 일부 div를 무작위로 생성하여 불꽃놀이 효과를 형성합니다 코드 복사 코드는 다음과 같습니다. js烟꽃效果 <br> document.onclick=함수(ev)<br> {<br> var oEvent=ev||이벤트;<br> var aDiv=[];<br> var oDiv=null;<br> var _oDiv=document.createElement('div');<br> var i=0;<br> var x=oEvent.clientX;<br> var y=oEvent.clientY;<br> _oDiv.style.position='절대';<br> _oDiv.style.Background='빨간색';<br> _oDiv.style.width='3px';<br> _oDiv.style.height='30px';<br> _oDiv.style.left=oEvent.clientX 'px';<br> _oDiv.style.top=document.documentElement.clientHeight 'px';<br> document.body.appendChild(_oDiv);<br> var t=setInterval(함수 (){<br> if(_oDiv.offsetTop<=y)<br /> {<br /> ClearInterval(t);<br /> 표시();<br /> document.body.removeChild(_oDiv);<br /> }<br /> _oDiv.style.top=_oDiv.offsetTop-30 'px';<br /> }, 30);<br /> 함수 표시()<br /> {<br /> var oDiv=null;<br /> for(i=0;i<100;i )<br /> {<br /> oDiv=document.createElement('div');<br /> oDiv.style.width='3px';<br /> oDiv.style.height='3px';<br /> oDiv.style.Background='#' Math.ceil(Math.random()*0xEFFFFF 0x0FFFFF).toString(16);<br /> oDiv.style.position='절대';<br /> oDiv.style.left=x 'px';<br /> oDiv.style.top=y 'px';<br /> var a=Math.random()*360;<br /> //oDiv.speedX=Math.random()*40-20;<br /> //oDiv.speedY=Math.random()*40-20;<br /> oDiv.speedX=Math.sin(a*180/Math.PI)*20*Math.random();<br /> oDiv.speedY=Math.cos(a*180/Math.PI)*20*Math.random();<br /> document.body.appendChild(oDiv);<br /> aDiv.push(oDiv);<br /> }<br /> }<br /> setInterval(doMove, 30);<br /> 함수 doMove()<br /> {<br /> for(i=0;i<aDiv.length;i )<br /> {<br /> aDiv[i].style.left=aDiv[i].offsetLeft aDiv[i].speedX 'px';<br /> aDiv[i].style.top=aDiv[i].offsetTop aDiv[i].speedY 'px';<br /> aDiv[i].speedY =1;<br /> if(aDiv[i].offsetLeft<0 || aDiv[i].offsetLeft>document.documentElement.clientWidth || aDiv[i].offsetTop<0 || aDiv[i].offsetTop>document.documentElement.clientHeight)<br> {<br> document.body.removeChild(aDiv[i]);<br> aDiv.splice(i, 1);<br> }<br> }<br> }<br> };<br> <br> </머리><br><body style="overflow:hidden; 배경:black;"><br> </본문><br> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
