(一)

生成从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. YaoLingJump开发者日志（八）V1.1版本完成

    跳跃吧瑶玲下载连接 官网下载(网站服务器不支持10M以上的文件上传-_-||) 百度网盘下载 介绍   忙里偷闲,把之前的工作整理了一下完成V1.1版本,下面是更新! (1)去掉了积分榜. (2)增加 ...

  2. 对alpha发布的总结技术随笔

    对于今天的alpha发布,首先需要自我检讨,因为我们组没有展示作品.主要的原因还是我们投入的时间不足.我们的项目是约跑App,首先选择做安卓平台的东西,我们大家都需要熟悉新的开发软件Android S ...

  3. STL--heap概述：make_heap,sort_heap,pop_heap,push_heap

    heap并不属于STL容器组件,它分为 max heap 和min heap,在缺省情况下,max-heap是优先队列(priority queue)的底层实现机制. 而这个实现机制中的max-hea ...

  4. JDK版本Java SE、Java EE、Java ME的区别

    想在win7 X64上搭建JAVA开发环境来着(只是尝试下),打开JAVA 官网下载JDK,发现好多版本懵了,百度了下找到这些版本的区别,故有了下文 1.JAVA SE Java2平台标准版(Java ...

  5. 评论模块Demo（XML读写，定时器。）

    这个Demo主要是自己做练习熟悉jquery,ajax,与xml文件的读写,以下是实现页面效果: 后台控制器: public ActionResult AddMsg() { XmlDocument x ...

  6. BZOJ4310 跳蚤（后缀数组+二分答案）

    注意到答案一定是原串的子串,于是考虑造出SA,二分答案是第几小的子串.第k小子串很容易在SA上求出.之后计算使他成为最大子串至少要在几个位置切割,对每个字典序比答案大的后缀,找到所有合法切割位置(求l ...

  7. BZOJ2298：[HAOI2011]problem a——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=2298 https://www.luogu.org/problemnew/show/P2519 一次 ...

  8. C++中数组和vector

    本文基于邓俊辉编著<数据结构(C++语言版)(第3版)>.<C++ Primer(第5版)>以及网上的相关博文而写,博主水平有限,若有不妥处,欢迎指出. 一.数组 C++中数组 ...

  9. [Leetcode] gas station 气站

    There are N gas stations along a circular route, where the amount of gas at station i isgas[i]. You ...

  10. HDOJ.1800 Flying to the Mars（贪心+map）

    Flying to the Mars 点我挑战题目 题意分析 有n个人,每个人都有一定的等级,高等级的人可以教低等级的人骑扫帚,并且他们可以共用一个扫帚,问至少需要几个扫帚. 这道题与最少拦截系统有异 ...