(一)

生成从minNum到maxNum的随机数

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <!--1.引入jq-->

         <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

     </head>

     <body>

         <!--2.html-->

         <button>点我</button>

     </body>

     <script type="text/javascript">

         //3.js函数和事件

         $("button").click(function(){

             var n = randomNum(1,5)

             console.log(n)

         })

         //生成从minNum到maxNum的随机数

         function randomNum(minNum, maxNum) {

             switch(arguments.length) {

                 case 1:

                     return parseInt(Math.random() * minNum + 1, 10);

                     break;

                 case 2:

                     return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);

                     break;

                 default:

                     return 0;

                     break;

             }

         }

     </script>

 </html>

(二)

纯js雪花飘落效果

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

     body {

       background-color: #000;

       /*防止出现向下滚动条*/

       overflow: hidden;

     }

   </style>

 </head>

 <body>

   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

   <script>

     function snow() {

       //1、定义一片雪花模板

       var flake = $("<div>").css({

         "position": "absolute",

         "color": "#fff"

       }).html('@');

       //获取页面的宽度，利用这个数来算出，雪花开始时left的值

       var documentWidth = $(document).width();

       //获取页面的高度 相当于雪花下落结束时Y轴的位置

       var documentHieght = $(document).height();

       //定义生成一片雪花的毫秒数

       var millisec = 100;

       //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；

      var falling = setInterval(function() {

         //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置

         var startLeft = Math.random() * documentWidth;

         //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置

         var endLeft = Math.random() * documentWidth;

         //随机生成雪花大小

         var flakeSize = 5 + 20 * Math.random();

         //随机生成雪花下落持续时间

         var durationTime = 4000 + 7000 * Math.random();

         //随机生成雪花下落 开始 时的透明度

         var startOpacity = 0.7 + 0.3 * Math.random();

         //随机生成雪花下落 结束 时的透明度

         var endOpacity = 0.2 + 0.2 * Math.random();

         //3、克隆一个雪花模板,定义雪花的初始样式，拼接到页面中

         flake.clone().appendTo($("body")).css({

           "left": startLeft,

           "opacity": startOpacity,

           "font-size": flakeSize,

           "top": "-25px",

         }).animate({ //执行动画

           "left": endLeft,

           "opacity": endOpacity,

           "top": documentHieght

         }, durationTime, function() {

           //4、当雪花落下后，删除雪花。

           $(this).remove();

         });

       }, millisec);

       //5秒后清除雪花

       setTimeout(function(){

           clearInterval(falling);

       },5000)

     };

     snow();

   </script>

 </body>

 </html>

js_开发小技巧记录（一）的更多相关文章

  1. flex开发小技巧集锦

    关于flex开发网上有非常多的相关信息介绍,因此我们要想学习关于flex开发的知识信息技能是一件非常简单和方便的事情.而针对于flex开发小编要告诉大家的是一些flex开发小技巧.利用这些小技巧能够有 ...

  2. 开发小技巧1——Logger

    开发小技巧1——Logger 在项目中加入静态Logger类,用于捕获并记录程序的进度.错误信息:   public static class Logger { public static void ...

  3. Delphi三层开发小技巧:TClientDataSet的Delta妙用

    Delphi三层开发小技巧:TClientDataSet的Delta妙用 转载 2014年10月13日 09:41:14 标签: 三层 / ClientDataSet 318 from :http:/ ...

  4. Windows统一平台: 开发小技巧

    Windows统一平台: 开发小技巧 技巧一: 在手机端拓展你应用的显示区域.(WP8.1中也适用) 对于Windows Phone系统的手机, 手机屏幕最上方为系统状态栏(System Tray), ...

  5. TP开发小技巧

    TP开发小技巧原文地址http://wp.chenyuanzhao.com/wp/2016/07/23/tp%E5%BC%80%E5%8F%91%E5%B0%8F%E6%8A%80%E5%B7%A7/ ...

  6. 移动Web开发小技巧

    移动Web开发小技巧 添加到主屏后的标题(IOS) name="apple-mobile-web-app-title" content="标题"> 启用  ...

  7. BizTalk开发小技巧

    BizTalk开发小技巧 随笔分类 - Biztalk Biztalk 使用BizTalk实现RosettaNet B2B So Easy 摘要: 使用BizTalk实现RosettaNet B2B ...

  8. Java开发小技巧（三）：Maven多工程依赖项目

    前言 本篇文章基于Java开发小技巧(二):自定义Maven依赖中创建的父工程project-monitor实现,运用我们自定义的依赖包进行多工程依赖项目的开发. 下面以多可执行Jar包项目的开发为例 ...

  9. iOS开发小技巧 - UILabel添加中划线

    iOS开发小技巧 遇到的问题: 给Label添加中划线,然后并没有效果 NSString *str = [NSString stringWithFormat:@"合计金额 ¥%.2f&quo ...

随机推荐

  1. JS 书籍拓展内容

    一.面向对象

  2. animate.css与wow.js制作网站动效

    animate.css 官网:https://daneden.github.io/animate.css/ 包括:attention seekers:关注者 bouncing entrances:跳跃 ...

  3. HTML5拖拽表格中单元格间的数据库

    效果图:

  4. 2011 Multi-University Training Contest 8 - Host by HUST

    Rank:56/147. 开场看B,是个线段树区间合并,花了2hour敲完代码...再花了30min查错..发现push_down有问题.改了就AC了. 然后发现A过了很多人.推了个公式,发现是个分段 ...

  5. POJ 2785 4 Values whose Sum is 0(折半枚举)

    给出四个长度为n的数列a,b,c,d,求从这四个数列中每个选取一个元素后的和为0的方法数.n<=4000,abs(val)<=2^28. 考虑直接暴力,复杂度O(n^4).显然超时. # ...

  6. BZOJ4198 & 洛谷2168 & UOJ130：[NOI2015]荷马史诗——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4198 https://www.luogu.org/problemnew/show/P2168 ht ...

  7. React受控组件和非受控组件

    受控组件和非受控组件主要是用来解决表单组件状态谁来控制的问题.因为用户的输入会反应在界面上,相当于视图的状态发生了变化,而react是通过虚拟DOM比对修改视图的,这里就要决定谁来控制表单组件的状态. ...

  8. poj2409:Let it Bead(置换群 polya定理)

    题目大意:长度为n的项链,要染m种颜色,可以通过旋转或翻转到达的状态视为同一种,问有多少种染色方案. 学了一波polya定理,发现很好理解啊,其实就是burnside定理的扩展. burnside定理 ...

  9. bzoj3232圈地游戏——0/1分数规划+差分建模+判环

    Description DZY家的后院有一块地,由N行M列的方格组成,格子内种的菜有一定的价值,并且每一条单位长度的格线有一定的费用. DZY喜欢在地里散步.他总是从任意一个格点出发,沿着格线行走直到 ...

  10. Codeforces Round #326 (Div. 2) B Duff in Love 简单数论 姿势涨

    B. Duff in Love time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...