(一)

生成从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. PHP查询网站

    1.w3school http://www.w3school.com.cn/php/ 2.PHP官网 http://php.net/manual/en/funcref.php 3.国内的类似w3csh ...

  2. volatile并不能保证数据同步、只能保证读取到最新主内存数据

    在 java 垃圾回收整理一文中,描述了jvm运行时刻内存的分配.其中有一个内存区域是jvm虚拟机栈,每一个线程运行时都有一个线程栈, 线程栈保存了线程运行时候变量值信息.当线程访问某一个对象时候值的 ...

  3. Bootstrap 基本模板理解

    <!-- 声明文档类型 为 html5 --> <!DOCTYPE html> <!-- 声明页面内容主要为 中文简体 --> <html lang=&quo ...

  4. vs2015常用代码块与自定义代码块

    常用代码块 代码段名 描    述 #if 该代码段用#if和#endif命令围绕代码 #region 该代码段用#region和#endregion命令围绕代码 ~ 该代码段插入一个析构函数 att ...

  5. Luogu3936 Coloring（模拟退火）

    裸退火,每次交换两个格子即可.依旧不会调参,稍微抄了点参数并且把随机种子设成了一个神奇的数字终于过掉了. #include<iostream> #include<cstdio> ...

  6. SOA,ESB,WebService的关系

    1. 什么是SOA SOA(Service-Oriented Architecture)既服务导向架构,是指为了解决在inernet环境下业务集成的需要,通过连接能完成特定任务的独立功能实现的一种软件 ...

  7. 【转】c# 类反射简单操作

    转:http://www.jb51.net/article/25863.htm 首先建立一个测试的类  复制代码代码如下: public class MyClass { public int one ...

  8. [luogu5176] 公约数

    题目描述 求 \[ \sum_{i=1}^n\sum_{j=1}^m\sum_{k=1}^p\gcd(i\cdot j,i\cdot k,j\cdot k)\times \gcd(i,j,k)\tim ...

  9. 解析Fetch实现请求数据

    一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好.今天我们介绍的Fetc ...

  10. Codeforces Round #341 (Div. 2)B

    B. Wet Shark and Bishops time limit per test 2 seconds memory limit per test 256 megabytes input sta ...