脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 下雨

javascript实现下雨效果

 更新时间：2017年03月27日 11:01:05   投稿：sxyy  
本文主要介绍了javascript实现下雨效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧

效果图：

代码如下：

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>梦柯教育-锤子老师</title>
 <style type="text/css">
 *{margin:0;padding:0;list-style-type:none;}
 a,img{border:0;color:#fff;}
 body {
 overflow: hidden;
 background: black;
  text-align: center;
  line-height: 20px;
 }
 </style>
 </head>
 <body><a href="https://jq.qq.com/?_wv=1027&k=469M8qI" 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(d i=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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS从数组中随机获取一个值的常用写法

    JS从数组中随机获取一个值的常用写法

    这篇文章主要介绍了JS从数组中随机获取一个值的常用写法,需要的朋友可以参考下
    2023-07-07
  • 原生JavaScript实现滑动拖动验证的示例代码

    原生JavaScript实现滑动拖动验证的示例代码

    这篇文章主要介绍了原生JavaScript实现滑动拖动验证的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 微信小程序模板template简单用法示例

    微信小程序模板template简单用法示例

    这篇文章主要介绍了微信小程序模板template简单用法,结合实例形式分析了微信小程序模板template的功能、简单使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-12-12
  • JS修改css样式style浅谈

    JS修改css样式style浅谈

    分为改变直接样式，改变className和改变cssText三种，需要的朋友可以参考下
    2013-05-05
  • 使用Bootstrap打造特色进度条效果

    使用Bootstrap打造特色进度条效果

    这篇文章给大家分享了基于bootstrap打造的特色进度条效果，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-05-05
  • 关于树形菜单 Checkbox的全选

    关于树形菜单 Checkbox的全选

    js树形菜单全选
    2008-07-07
  • JSON.parse 解析字符串出错的解决方法

    JSON.parse 解析字符串出错的解决方法

    程序中很多数据是动态拼接而成的json数据，最近在用json的时候老是现JSON.parse错误
    2010-07-07
  • 微信小程序实现星级评分

    微信小程序实现星级评分

    这篇文章主要为大家详细介绍了微信小程序实现星级评分，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 如何理解JavaScript模块化

    如何理解JavaScript模块化

    模块化简单来说就是将一个完整的长篇代码文件根据功能进行划分成几个文件，这些文件各自负责一个独立的功能，各个文件组合起来实现一个完整的大功能，这就是模块化，每个负责独立功能的文件就是模块。
    2021-05-05
  • JavaScript建立一个语法高亮输入框实现思路

    JavaScript建立一个语法高亮输入框实现思路

    通常网站自带的textarea编辑器不能满足我们的需求比如高亮显示代码等,在这篇文章中，我将使用JavaScript库ACE来创建一个输入框效果,该脚本允许开发人员创建支持语法高亮的输入框,感兴趣的你可不要错过了哈
    2013-02-02

最新评论