(一)

生成从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. SpringData——HelloWorld

    1.背景 最开始了解SpringData的时候,以为他不就是ORM的一种实现方式嘛,还能有什么新的东西.从hibernate到ibatis.mybatis,也许他只不过是spring想整合一个更方便的 ...

  2. CentOS 7 开放防火墙端口

    我:最近在使 CentOS 7时发现在本地不能访问linux上8080端口,以上是我的操作,修改后访问成功 CentOS 7 开放防火墙端口 命令 最近公司新的server要求用CentOS7, 发现 ...

  3. my.conf 修改编码

    mysql汉字乱码的原因 mysql默认的编码是Latin1是I-8859-1的别名,但Latin1是不支持汉字的,所以要将其改为UTF-8或GBK 1.关闭mysql服务器,这个很重要. 2.通过m ...

  4. jquery计算器（改良版）

    代码: <!Doctype html> <html> <meta charset="UTF-8"> <title>计算器</t ...

  5. EL中定义函数

    1.在java类中要定义一个static函数 2配置:在WEB-INF/*.tld的配置文件 3在JSP页面上 4使用

  6. python中深copy，浅copy

    版权声明:本文为博主原创文章,未经博主允许不得转载. >>> mylist1 = [1, 2, 3, 4] >>> myl = mylist1 >>&g ...

  7. JSON字符串和Javascript对象字面量

    JSON字符串和Javascript对象字面量 JSON是基于Javascript语法的一个子集而创建的,特别是对象和数组字面量语法. 正是由于JSON的这种特殊来历,导致很多Javascript程序 ...

  8. some of the properties associated with the solution could not be read解决方法

    基于TFS管理的解决方案打开时提示:“some of the properties associated with the solution could not be read”,并不影响项目加载,O ...

  9. 【learning】杜教筛求欧拉函数前缀和

    我们考虑利用\(\sum\limits_{d|n}\varphi(d)=n\)这一性质来处理这个问题 设\(f(n)=\sum\limits_{i=1}^{n}\varphi(i)\) 那么我们可以得 ...

  10. poco普通线程

    #include "Poco/Thread.h" #include "Poco/RunnableAdapter.h" #include <iostream ...