Code666 (代码贴、代码片段)

[JavaScript] 原生Js 简易烟花爆炸效果 →→→→→进入此内容的聊天室

来自 , 2019-07-01, 写在 JavaScript, 查看 110 次.
URL http://www.code666.cn/view/299dc35e
  1. <!--
  2. 智能社© - http://www.zhinengshe.com/
  3.  
  4. 微博：@北京智能社
  5. 微信：zhi_neng_she
  6.  
  7. 最具深度的前端开发培训机构 HTML+CSS/JS/HTML5
  8. -->
  9.  
  10.  
  11. <!doctype html>
  12. <html>
  13. <head>
  14. <meta charset="utf-8">
  15. <title>烟花 - 智能社 - www.zhinengshe.com</title>
  16. <script type="text/javascript">
  17. document.onclick=function (ev)
  18. {
  19.     var oEvent=ev||event;
  20.     var aDiv=[];
  21.     var oDiv=null;
  22.     var _oDiv=document.createElement('div');
  23.     var i=0;
  24.      
  25.     var x=oEvent.clientX;
  26.     var y=oEvent.clientY;
  27.      
  28.     _oDiv.style.position='absolute';
  29.     _oDiv.style.background='red';
  30.     _oDiv.style.width='3px';
  31.     _oDiv.style.height='30px';
  32.     _oDiv.style.left=oEvent.clientX+'px';
  33.     _oDiv.style.top=document.documentElement.clientHeight+'px';
  34.      
  35.     document.body.appendChild(_oDiv);
  36.      
  37.     var t=setInterval(function (){
  38.         if(_oDiv.offsetTop<=y)
  39.         {
  40.             clearInterval(t);
  41.             show();
  42.             document.body.removeChild(_oDiv);
  43.         }
  44.         _oDiv.style.top=_oDiv.offsetTop-30+'px';
  45.     }, 30);
  46.      
  47.     function show()
  48.     {
  49.         var oDiv=null;
  50.          
  51.         for(i=0;i<100;i++)
  52.         {
  53.             oDiv=document.createElement('div');
  54.          
  55.             oDiv.style.width='3px';
  56.             oDiv.style.height='3px';
  57.             oDiv.style.background='#'+Math.ceil(Math.random()*0xEFFFFF+0x0FFFFF).toString(16);
  58.             oDiv.style.position='absolute';
  59.             oDiv.style.left=x+'px';
  60.             oDiv.style.top=y+'px';
  61.              
  62.             var a=Math.random()*360;
  63.              
  64.             //oDiv.speedX=Math.random()*40-20;
  65.             //oDiv.speedY=Math.random()*40-20;
  66.              
  67.             oDiv.speedX=Math.sin(a*180/Math.PI)*20*Math.random();
  68.             oDiv.speedY=Math.cos(a*180/Math.PI)*20*Math.random();
  69.              
  70.             document.body.appendChild(oDiv);
  71.              
  72.             aDiv.push(oDiv);
  73.         }
  74.     }
  75.      
  76.     setInterval(doMove, 30);
  77.      
  78.     function doMove()
  79.     {
  80.         for(i=0;i<aDiv.length;i++)
  81.         {
  82.             aDiv[i].style.left=aDiv[i].offsetLeft+aDiv[i].speedX+'px';
  83.             aDiv[i].style.top=aDiv[i].offsetTop+aDiv[i].speedY+'px';
  84.             aDiv[i].speedY+=1;
  85.              
  86.             if(aDiv[i].offsetLeft<0 || aDiv[i].offsetLeft>document.documentElement.clientWidth || aDiv[i].offsetTop<0 || aDiv[i].offsetTop>document.documentElement.clientHeight)
  87.             {
  88.                 document.body.removeChild(aDiv[i]);
  89.                 aDiv.splice(i, 1);
  90.             }
  91.         }
  92.     }
  93. };
  94. </script>
  95. </head>
  96.  
  97. <body style="overflow:hidden; background:black;">
  98. </body>
  99. </html>
  100.  
  101. //javascript/8574

回复 "原生Js 简易烟花爆炸效果"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666