js雙色球隨機抽取1到33內幾個不相同的數

基本思路

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() 方法可返回某個指定的字符串值在字符串中首次出現的位置。