(一)

生成从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. ZOJ 2072 K-Recursive Survival

    https://vjudge.net/contest/67836#problem/K n people numbered 1 to n around a circle, we eliminate ev ...

  2. Qt Meta Object system 学习

    原文地址:http://blog.csdn.net/ilvu999/article/details/8049908 使用 meta object system 继承自 QOject 类定义中添加 Q_ ...

  3. dwarf是怎样处理的栈帧？

    dwarf是如何处理的栈帧呢? 首先看下非dwarf的情况是如何处理栈帧的: 1 3623804982590 0x3e90 [0xb0]: PERF_RECORD_SAMPLE(IP, 0x1): 1 ...

  4. 【bzoj2259】[Oibh]新型计算机 堆优化Dijkstra

    题目描述 Tim正在摆弄着他设计的“计算机”,他认为这台计算机原理很独特,因此利用它可以解决许多难题. 但是,有一个难题他却解决不了,是这台计算机的输入问题.新型计算机的输入也很独特,假设输入序列中有 ...

  5. BZOJ4700 适者（贪心+cdq分治+斜率优化）

    首先考虑怎么安排攻击顺序.显然如果攻击了某台兵器就应该一直连续攻击直到将其破坏,破坏所需时间可以直接算出来,设其为b.假设确定了某个破坏顺序,如果交换相邻两个兵器,显然不会对其他兵器造成影响,两种顺序 ...

  6. C语言调用Intel处理器CPUID指令的实例

    C语言调用Intel处理器CPUID指令的实例 来源 https://blog.csdn.net/subfate/article/details/50789905 在Linux环境下,使用C语言内嵌汇 ...

  7. [LouguT30212]玩游戏

    题面在这里 description 对于\(k=1,2,...,t\),求\[\frac{1}{nm}\sum_{i=1}^{n}\sum_{j=1}^{m}(a_i+b_j)^k\] 对\(9982 ...

  8. [洛谷P4118][Ynoi2016]炸脖龙I([洛谷P3934]Nephren Ruq Insania)

    题目大意:有$n$个数,每个数为$s_i$,两个操作: $1\;l\;r\;x:$表示将区间$[l,r]$内的数加上$x$ $2\;l\;r\;p:$表示求$s_l^{s_{l+1}^{^{s_{l+ ...

  9. BZOJ5334：[TJOI2018]数学计算——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=5334 小豆现在有一个数x,初始值为1. 小豆有Q次操作,操作有两种类型:  1 m: x = x ...

  10. BZOJ1085：[SCOI2005]骑士精神——题解+IDA*粗略讲解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1085 Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空 ...