首页 > 少儿编程 >javascript

javascript如何制作下雨特效

发布时间:2021-04-16 16:42:54 浏览量:

  HTML、CSS、javascript并称为网页制作三剑客,其中HTML和CSS都是比较容易学习的,但是javascript就比较难学习。但是javascript的功能确是其中最强大的,通过编写一定的代码,可以实现非常炫酷的特效!那么,javascript如何制作下雨特效呢?下面就一起来看下。

javascript如何制作下雨特效

  参照,如下实例,即可实现下雨特效,注意记事本文件保存为.htm或者.html。

      <pre>

      <!DOCTYPE html>

      <html>

      <head>

      <meta charset="gb2312" />

      <title>开锐教育</title>

      <style type="text/css">

      *{margin:0;padding:0;list-style-type:none;}

      a,img{border:0;color:#fff;}

      body {

      overflow: hidden;

      background: pink;

      text-align: center;

      line-height: 20px;

      }

      </style>

      </head>

      <body>

      <a href="https://www.51cedu.com/sebc/" rel="external nofollow" id="show"      style="position:absolute;bottom:0;left:10px;"></a>

      <canvas id="canvas-club" width="1920" height="666"></canvas>

      <script type="text/javascript">

       eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?      String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=

[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('d c=1h.1d("1b-19");d 7=c.14("W");d w=c.I=f.z;d h=c.H=f.G;d

E=\'18(0, 0, 0, .15)\';d A=Z;d k=[];e g(a,b){16 1a.g()*(b-a)+a}e O(){}O.X={v:e(){6.x=g(0,w);6.y=0;6.B=\'U(C, m%, D%)\';6.w=2;6.h=1;6.F=g(4,5);6.t=3;6.s=1;6.q=2;6.n=g(h*.8,h*.9);6.a=1;6.J=.V},K:e()

{l(6.y>6.n){7.T();7.Y(6.x,6.y-6.h/2);7.L(6.x+6.w/2,6.y-6.h/2,6.x+6.w/2,6.y+6.h/2,6.x,6.y+6.h/2);7.L(6.x-6.w/2,6.y+6.h/2,6.x-6.w/2,6.y-6.h/2,6.x,6.y-6.h/2);7.10=\'11(C, m%, D%, \'+6.a+\')\';7.12

();7.13()}u{7.M=6.B;7.N(6.x,6.y,6.q,6.q*5)}6.P()},P:e(){l(6.y<6.n){6.y+=6.F}u{l(6.a>.17){6.w+=6.t;6.h+=6.s;l(6.w>m){6.a*=6.J;6.t*=.Q;6.s*=.Q}}u{6.v()}}}};e p(){w=c.I=f.z;h=c.H=f.G}e R(){S(di=0;i<A;i++){(e(j){1c(e(){d o=1e O();o.v();k.1f(o)},j*1g)}(i))}}e r(){7.M=E;7.N(0,0,w,h);S(d i 1i k){k[i].K()}1j(r)}f.1k("p",p);R();r();',62,83,'||||||this|ctx||||||var|function|window|random||||

drops|if|100|hit||resize|size|anim|vh|vw|else|init||||innerWidth|max|color|180|50|clearColor|vy|innerHeight|height|width|va|draw|bezierCurveTo|fillStyle|fillRect||update|98|setup|for|beginPath|

hsl|96|2d|prototype|moveTo|30|strokeStyle|hsla|stroke|closePath|getContext|08|return|03|rgba|club|Math|canvas|setTimeout|getElementById|new|push|200|document|in|requestAnimationFrame|

addEventListener'.split('|'),0,{}))

       var str = "点击我们学习更多内容";

       setTimeout(function(){

       document.getElementById("show").innerHTML=str;

       },3000)

       </script>  

       </body>

      </html>

      </pre>

  以上就是开锐教育为大家带来的javascript如何制作下雨特效的相关介绍,更多信息,欢迎咨询在线客服!

免责声明:以上内容仅代表作者观点,其内容未经本站证实,开锐教育网对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与开锐教育网无关;如以上转载内容不慎侵犯了您的权益,请致电400-616-3379联系我们,我们将会及时处理。
相关推荐