js双色球随机抽取1到33内几个不相同的数

2019独角兽企业重金招聘Python工程师标准>>>

基本思路

1.循环出1到33的dom结构。

2.获取要生成几个数。

3.将不重复的数字放入一个数组。重复的不存入，再生成一个新的数字。

4.将生成的数组遍历出来。

//css
*{margin:0;padding:0;}
.main{width: 400px;padding:20px;}
ul{width: 400px;overflow: hidden;}
ul li{width: 30px;line-height: 30px;border-radius: 50%;text-align: center;
    background: #ededed;color: #333;font-size: 16px;float: left;margin:10px;list-style: none;
    cursor: pointer;}
ul li.on{background: #f40 !important;color: #fff !important;}
.tools{overflow: hidden;}
.tools select{float: left;width: 100px;text-align: center;vertical-align: middle;
         margin-left:200px;line-height: 32px;height: 32px;}
.btn{float: right;display: block;width: 80px;color: #fff;color:#f40;
     line-height: 32px;border-radius: 4px;border:1px solid #f40;font-size: 14px;
     text-align: center;cursor: pointer;}

//dom
 <div class="main">
        <ul class="number1"></ul>
        <div class="tools">
          <select class="select">
            <option selected>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
          </select>   
          <span class="btn btn1">随机选号</span>
        </div>
    </div>

 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
$(function(){
    for (var i = 1; i <34; i++) {
        //生成dom对象
        if(i<10){
                //小于10的数字在前边加0
            $(".number1").append('<li>0'+i+'</li>');
        }else if(i>=10){
            $(".number1").append('<li>'+i+'</li>');
        }
    }
        //获取要生成几个数
    var counts=$(".select").val();
    $(".select").change(function(){
        counts=$(this).val();
    });
    $('.btn1').click(function(){
        $('.number1 li').removeClass('on');
        var arr=[];  //先创建一个数组
        for(var i=0;arr.length<counts;i++){
            //判断数组的长度是否达到设定的个数
            var num=Math.ceil(33*Math.random());  
            //33*Math.random() 生成0-33之间的随机数（不包含0，33），然后Math.ceil()用方法向上取整得到1-33之间的一个整数。
            if(arr.indexOf(num)==-1){
        //判断如果arr数组中不存在num这个数，将其存入数组arr。
                arr.push(num);
            }
        }
        console.log(arr); 
        for(var a in arr){
            //遍历出数组中的所有值，并将其所对应的索引值附加css样式。因为索引值是从0开始计算的，所以要-1。
            $('.number1 li').eq(arr[a]-1).addClass('on');
        }
    })
})

1.val()方法

val() 方法返回或设置被选元素的 value 属性。

2.change()

当元素的值发生改变时，会发生 change 事件。

该事件仅适用于文本域（text field），以及 textarea 和 select 元素。

change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。

3.ceil()

eil() 方法执行的是向上取整计算，它返回的是大于或等于函数参数，并且与之最接近的整数。

4.random()

random() 方法可返回介于 0 ~ 1 之间的一个随机数。

语法：

Math.random()

5.indexOf()

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

 

转载于:https://my.oschina.net/u/2958559/blog/774913