javascript实现下雨效果


Posted in Javascript onMarch 27, 2017

效果图:

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
vue实现动态数据绑定
Apr 28 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
HTML的select控件美化
Mar 27 #Javascript
JS实现的点击表头排序功能示例
Mar 27 #Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 #Javascript
vue2.0实战之基础入门(1)
Mar 27 #Javascript
jQuery中的deferred使用方法
Mar 27 #jQuery
Angular2利用组件与指令实现图片轮播组件
Mar 27 #Javascript
Vue 过渡实现轮播图效果
Mar 27 #Javascript
You might like
php fckeditor 调用的函数
2009/06/21 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
php实现图片缩略图的方法
2016/03/29 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python pickle模块用法实例分析
2015/05/27 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Python PO设计模式的具体使用
2019/08/16 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
四好少年事迹材料
2014/01/12 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
阅兵口号
2014/06/19 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
2015年入党决心书
2015/02/05 职场文书
安徽导游词
2015/02/12 职场文书
工作感想范文
2015/08/07 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
零基础学java之循环语句的使用
2022/04/10 Java/Android