本文实例讲述了原生Js实现简易烟花爆炸效果的方法。分享给大家供大家参考。具体分析如下： 实现原理： 在一定范围内，随机生成一些div，形成烟花效果 复制代码 代码如下: js烟花效果 <br /> document.onclick=function (ev)<br /> {<br /> var oEvent=ev||event;<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='absolute';<br /> _oDiv.style.background='red';<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(function (){<br /> if(_oDiv.offsetTop<=y)<br /> {<br /> clearInterval(t);<br /> show();<br /> document.body.removeChild(_oDiv);<br /> }<br /> _oDiv.style.top=_oDiv.offsetTop-30+'px';<br /> }, 30);<br /> function show()<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='absolute';<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 /> function 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 /> 希望本文所述对大家的javascript程序设计有所帮助。
