1.效果图：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Math.random方法彩票随机数的生成</title>
  6. </head>
  7. <body>
  8.     <!-- 设置样式 -->
  9.     <input type="text" id="text">
  10.     <button id="btnGo">开始</button>
  11.     <button id="btnStop">获取随机数组</button>
  12.  
  13.     <script type="text/javascript">
  14.  
  15.        //获取节点
  16.        var btnGo = document.getElementById("btnGo");
  17.        var btnStop = document.getElementById("btnStop");
  18.        var text = document.getElementById("text");
  19.        //定义生成最小到最大值的随机函数
  20.        function rand(min,max){
  21.             return parseInt(Math.random()*( max - min + 1) + min);
  22.        }
  23.  
  24.        function start(min,max,length){
  25.             //定义空数组
  26.           var arr = [];
  27.  
  28.           while(arr.length<length){
  29.                  //生成一个随机数prem
  30.                var prem=rand(min,max);
  31.                //判断生成的随机数prem是否在数组arr里,果然不在，就将这个随机数插入到数组里，如果在，执行下一次循环
  32.                if(arr.indexOf(prem) == -1){
  33.  
  34.                     arr.push(prem);
  35.                }
  36.           }
  37.           //返回数组arr
  38.           return arr;
  39.        }
  40.  
  41.        var timer = 0;
  42.        //单击开始按钮生成随机数组
  43.        btnGo.onclick =function(){
  44.             //清除
  45.             clearInterval(timer);
  46.             timer = setInterval(function() {
  47.              text.value = start(1,33,7);
  48.         },50)
  49.        }
  50.        //单击停止按钮获取一组随机数
  51.        btnStop.onclick =function(){
  52.                 clearInterval(timer);
  53.        }
  54.  
  55.     </script>
  56. </body>
  57. </html>

2.复杂版

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Math.random方法彩票随机数的生成-升级版</title>
  6.     <style type="text/css">
  7.       *{
  8.           margin: 0;
  9.           padding: 0;
  10.       }
  11.       .wrap{
  12.           width: 600px;
  13.           height: 300px;
  14.           background-color: #f8e2e2;
  15.           margin: 0 auto;
  16.       }
  17.       .list{
  18.           width: 440px;
  19.           /*border: 1px solid red;*/
  20.           margin: 0px auto;
  21.       }
  22.       .list li{
  23.            list-style: none;
  24.            width: 30px;
  25.            height: 30px;
  26.            display: inline-block;
  27.            border: 1px solid #fff;
  28.            border-radius: 30px;
  29.            line-height: 30px;
  30.            text-align: center;
  31.            margin: 15px auto 15px;
  32.            /*background-color: #f8f8f8;*/
  33.            /*background-color: rgba(255,255,255,1);*/
  34.       }
  35.       .wrap p{
  36.           text-align: center;
  37.       }
  38.       .wrap p button{
  39.           text-align: center;
  40.           width: 100px;
  41.       }
  42.       #setBtn{
  43.           background-color: red;
  44.           color: #fff;
  45.           border: none;
  46.       }
  47.       .active{
  48.           background-color: red;
  49.           color: #fff;
  50.       }
  51.     </style>
  52. </head>
  53. <body>
  54.        <div class="wrap" id="wrap">
  55.               <ul class="list">
  56.                   <li>01</li>
  57.                   <li>02</li>
  58.                   <li>03</li>
  59.                   <li>04</li>
  60.                   <li>05</li>
  61.                   <li>06</li>
  62.                   <li>07</li>
  63.                   <li>08</li>
  64.                   <li>09</li>
  65.                   <li>10</li>
  66.                   <li>11</li>
  67.                   <li>12</li>
  68.                   <li>13</li>
  69.                   <li>14</li>
  70.                   <li>15</li>
  71.                   <li>16</li>
  72.                   <li>17</li>
  73.                   <li>18</li>
  74.                   <li>19</li>
  75.                   <li>20</li>
  76.                   <li>21</li>
  77.                   <li>22</li>
  78.                   <li>23</li>
  79.                   <li>24</li>
  80.                   <li>25</li>
  81.                   <li>26</li>
  82.                   <li>27</li>
  83.                   <li>28</li>
  84.                   <li>29</li>
  85.                   <li>30</li>
  86.                   <li>31</li>
  87.                   <li>32</li>
  88.                   <li>33</li>
  89.               </ul>
  90.               <p>
  91.                   <button id="setBtn">随机红球</button>
  92.                <button id="clearBtn">清空</button>
  93.               </p>
  94.        </div>
  95.        <script type="text/javascript">
  96.              var ballList = document.getElementById("wrap").getElementsByTagName("li");
  97.              var setBtn =document.getElementById("setBtn");
  98.              var clearBtn =document.getElementById("clearBtn");
  99.               //定义随机数组
  100.              function rnd(min, max) {
  101.               return parseInt(Math.random()*(max - min + 1) + min);
  102.           }
  103.           function rndArray(min, max, length) {
  104.         //先定义一个空数组
  105.         var arr = [];
  106.         //生成一个长度为7的数组
  107.         while(arr.length < length) {
  108.             //生成一个随机数
  109.             var rand = rnd(min, max);
  110.             //判断生成的随机数rand是否在数组arr里,果然不在，就将这个随机数插入到数组里，如果在，执行下一次循环
  111.             if(arr.indexOf(rand) == -1) {
  112.                 arr.push(rand);
  113.             }
  114.         }
  115.         arr.sort(function(a, b){return a - b;})
  116.         return arr;
  117.     }
  118.  
  119.     function selectBall() {
  120.         for(var j = 0; j < ballList.length; j++) {
  121.             ballList[j].className = "";
  122.         }
  123.         var arr = rndArray(1,33,7);
  124.         // console.log(arr);
  125.         for(var i = 0; i < arr.length; i++) {
  126.             ballList[arr[i]-1].className = "active";
  127.         }
  128.     }
  129.     var timer = 0;
  130.     setBtn.onclick = function() {
  131.         clearTimeout(timer);
  132.         timer = setInterval(selectBall,100);
  133.         setTimeout(function() {
  134.             clearTimeout(timer);
  135.         },3000)
  136.         // clearTimeout(timer);
  137.     }
  138.  
  139.     clearBtn.onclick = function() {
  140.         clearTimeout(timer);
  141.         for(var j = 0; j < ballList.length; j++) {
  142.             ballList[j].className = "";
  143.         }
  144.     }
  145.        </script>
  146. </body>
  147. </html>

JavaScript 实现彩票中随机数组的获取的更多相关文章

  1. shell中一维数组值得获取

    (1)数组的定义 root@tcx4440-03:~# a=(1 2 3 4) root@tcx4440-03:~# echo ${a[1]}2 root@tcx4440-03:~# a[0]=1ro ...

  2. js在数组arr中随机获取count数量的元素

    // 在数组arr中随机获取count数量的元素; const getRandomArrayElements = (arr, num) => { // 新建一个数组,将传入的数组复制过来,用于运 ...

  3. php 从一个数组中随机获取固定数据

    <?php /* * * 通过一个标识,从一个数组中随机获取固定数据 * $arr 数组 * $num 获取的数量 * $time 随机固定标识值,一般用固定时间或者某个固定整型 * */ fu ...

  4. JavaScript中随机打乱一个数组

    JavaScript中随机打乱一个数组 function shuffle(arr) { let i = arr.length; while (i) { let j = Math.floor(Math. ...

  5. js从数组中随机获取n个不重复的数据

    做云课堂的作业时遇到一要求,实现刷新页面时显示不同数据,(数组中20个据,页面加载10个).思路就是从0-19中随机生成10个不同的数,让数组取下标输出数据. 下面是在num的范围内生成n个不重复的数 ...

  6. 前端开发：Javascript中的数组，常用方法解析

    前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...

  7. JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...

  8. javascript中的数组扩展（一）

     javascript中的数组扩展(一) 随着学习的深入,发现需要学习的关于数组的内容也越来越多,后面将会慢慢归纳,有的是对前面的强化,有些则是关于前面的补充. 一.数组的本质    数组是按照次序排 ...

  9. JavaScript中对数组的操作

    原文:JavaScript中对数组的操作 一:数组的使用 1.定义:JavaScript中对数组的定义有两种形式.如: .var arr = [12,3,5,8]; .var arr = new Ar ...

随机推荐

  1. C/C++学习链接

    C/C++堆和栈的区别:http://blog.csdn.net/hairetz/article/details/4141043

  2. PHP安装模式cgi、fastcgi、php_mod比较

    先了解一下普通cgi的工作流程: web server收到用户请求,并把请求提交给cgi程序,cgi程序根据请求提交的参数作相应处理,然后输出标准的html语句返回给web server,web se ...

  3. Shell入门教程：流程控制（1）命令的结束状态

    在Bash Shell中,流程控制命令有2大类:“条件”.“循环”.属于“条件”的有:if.case:属于“循环”的有:for.while.until:命令 select 既属于“条件”,也属于“循环 ...

  4. java基础知识（二）字符串处理

    字符串是程序开发中使用最为频繁,因此为了工作的高效和作为一名想进阶的程序员,了解并掌握字符串的处理显得尤为重要.java为我们提供了String.StringBuffer.StringBuilde三个 ...

  5. 2.2WebApi路由在Action上

    这篇文章描述 ASP.NET Web API 如何将 HTTP 请求路由到特定的操作在控制器上. 有关路由的高级别概述,请参见ASP.NET Web API 的路由. 本文着眼于路由进程的详细信息.如 ...

  6. 倾力总结40条常见的移动端Web页面问题解决方案

    1.安卓浏览器看背景图片,有些设备会模糊.   用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率 ...

  7. 理解记忆三种常见字符编码：ASCII, Unicode,UTF-8

    理解什么是字符编码? 计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节(byte),所以,一个字节能表示的最大的整数就是25 ...

  8. jstl param url redirect import

    import标签 import标签用来导入其他页面 属性: * url :引入页面的路径 * context :工程名 * var :将引入的页面保存到一个变量中 * scope :保存到一个作用域中 ...

  9. Java 类初始化顺序

    总的来说: 父类静态代码块->子类静态代码块->子类main()方法->父类构造块->父类构造方法->子类构造块->子类构造方法 注意,就算是静态的方法也需要调用才 ...

  10. error LNK2019 无法解析的外部符号 __imp__accept@12

    用VS2015编译CuraEngine,出现如下错误: PlatformSocket.obj   error LNK2019 无法解析的外部符号 __imp__accept@12 PlatformSo ...