js写了一个双色球的生成器，大家都知道，双色球的规则是

    1. 红球6个，1-33中生成

    2.篮球一个，1-16中生成

 起先，做的一个代码：

  思想

        [ 红色球：从1-33个数字中随机取出一个数，然后和已取出的其他数据进行比较，如果存在此数，则从新选取；]

        [ 蓝色球：从1-16中随机取出一个数位蓝色球]

如下：

view plaincopy to clipboardprint?
<mce:script type="text/javascript"><!--  
 function ok()   
  {  
       var redRoll=new Array(6);  
       var blueRoll;  
       var redRandom ;  
       redRoll[0]=Math.ceil(Math.random() * 33);  
 
       for (var i = 1; i < 6; i++)   
       {  
           do   
           {  
               var flag = true;  
               redRandom = Math.ceil(Math.random() * 33);  
               for (var j = 0; j < i; j++)   
               {  
                   if (redRandom == redRoll[j])  
                   {  
                       flag = false;  
                       break;  
                   }  
                   redRoll[i] = redRandom;  
               }  
           }  while (!flag);  
            
       }  
                var rollObj;  
                for (var j = 1; j < 7; j++)   
                {  
                    var redId = "red" + j;  
                    rollObj = $(redId);  
                    rollObj.innerHTML = redRoll[j-1];  
                }  
 
 
                  
    $("blue1").innerHTML =Math.ceil( Math.random() * 16) ;  
    }  
// --></mce:script> 
<mce:script type="text/javascript"><!--
 function ok()
  {
       var redRoll=new Array(6);
       var blueRoll;
       var redRandom ;
       redRoll[0]=Math.ceil(Math.random() * 33);

       for (var i = 1; i < 6; i++)
       {
           do
           {
               var flag = true;
               redRandom = Math.ceil(Math.random() * 33);
               for (var j = 0; j < i; j++)
               {
                   if (redRandom == redRoll[j])
                   {
                       flag = false;
                       break;
                   }
                   redRoll[i] = redRandom;
               }
           }  while (!flag);
         
       }
                var rollObj;
                for (var j = 1; j < 7; j++)
                {
                    var redId = "red" + j;
                    rollObj = $(redId);
                    rollObj.innerHTML = redRoll[j-1];
                }

               
    $("blue1").innerHTML =Math.ceil( Math.random() * 16) ;
    }
// --></mce:script>
 

后来发现这样虽然能取出不会重复的6个随机数做蓝色球，但实际上这样存在一个漏洞，因为，在取出几个数据之后，剩下数据的选取每个数据出现的概率是不一样的，而在上面的代码中，如果一个数字已被选取，下次再次选取时被选出的概率是一样的，所以将代码做了进一步修改：

修改后的代码如下：

view plaincopy to clipboardprint?
<mce:script type="text/javascript"><!--  
    function okOne() {  
        var numArr;  
        var redNumArr;  
        var liRedArr;  
        numArr = new Array();  
        redNumArr = new Array();  
        liRedArr=new Array();  
        var num = 0;  
        var index;  
        for (var i = 0; i < 33; i++) {  
            numArr[i] = i + 1;  
        }  
 
        var a;  
        var j = 33;  
        for (var i = 0; i < 6; i++) {  
            redNumArr = numArr;  
            index = Math.ceil(Math.random() * j);  
            a = redNumArr.splice(index - 1, 1);  
            liRedArr[i]=a;   
            numArr = redNumArr.splice(0, j);  
            j--;  
        }  
 
        var rollObj;  
        for (var j = 1; j < 7; j++) {  
            var redId = "1red" + j;  
            rollObj = $(redId);  
            rollObj.innerHTML = liRedArr[j - 1];  
        }  
 
        $("1blue1").innerHTML = Math.ceil(Math.random() * 16);  
 
    }  
// --></mce:script> 
<mce:script type="text/javascript"><!--
    function okOne() {
        var numArr;
        var redNumArr;
        var liRedArr;
        numArr = new Array();
        redNumArr = new Array();
        liRedArr=new Array();
        var num = 0;
        var index;
        for (var i = 0; i < 33; i++) {
            numArr[i] = i + 1;
        }

        var a;
        var j = 33;
        for (var i = 0; i < 6; i++) {
            redNumArr = numArr;
            index = Math.ceil(Math.random() * j);
            a = redNumArr.splice(index - 1, 1);
            liRedArr[i]=a;
            numArr = redNumArr.splice(0, j);
            j--;
        }

        var rollObj;
        for (var j = 1; j < 7; j++) {
            var redId = "1red" + j;
            rollObj = $(redId);
            rollObj.innerHTML = liRedArr[j - 1];
        }

        $("1blue1").innerHTML = Math.ceil(Math.random() * 16);

    }
// --></mce:script>

前台的html代码如下：

view plaincopy to clipboardprint?
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title></title>  
    <mce:style type="text/css"><!-- 
        #all  
        {  
            width: 600px;  
            height: 400px;  
            margin: 0px;  
            padding: 0px;  
            margin: 0 auto;  
        } 
        #all .title  
        {  
            width: 585px;  
            height: 19px;  
            line-height: 19px;  
            padding-top: 6px;  
            font-size: 14px;  
            background-color: #cc3399;  
            color: White;  
            font-weight: bold;  
            padding-left: 15px;  
        } 
        #all ul  
        {  
            list-style-type: none;  
            margin: 0px;  
            padding: 0px;  
            height: 25px;  
        } 
        #all ul li  
        {  
            list-style-type: none;  
            float: left;  
            width: 98px;  
            height: 25px;  
            border: 1px solid gray;  
            text-align: center;  
            color: Red;  
        }  
      
--></mce:style><style type="text/css" mce_bogus="1">        #all  
        {  
            width: 600px;  
            height: 400px;  
            margin: 0px;  
            padding: 0px;  
            margin: 0 auto;  
        } 
        #all .title  
        {  
            width: 585px;  
            height: 19px;  
            line-height: 19px;  
            padding-top: 6px;  
            font-size: 14px;  
            background-color: #cc3399;  
            color: White;  
            font-weight: bold;  
            padding-left: 15px;  
        } 
        #all ul  
        {  
            list-style-type: none;  
            margin: 0px;  
            padding: 0px;  
            height: 25px;  
        } 
        #all ul li  
        {  
            list-style-type: none;  
            float: left;  
            width: 98px;  
            height: 25px;  
            border: 1px solid gray;  
            text-align: center;  
            color: Red;  
        }  
    </style>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div id="all">  
        <div style="height: 50px; width: 600px; text-align: center; margin: 30 0;">  
            <asp:Button ID="Button1" runat="server" Text="开局" BackColor="Pink" OnClientClick="javascript:ok();okOne(); return false;" /></div>  
        <div class="title">  
            红球</div>  
        <div>  
            <ul>  
                <li id="red1"></li>  
                <li id="red2"></li>  
                <li id="red3"></li>  
                <li id="red4"></li>  
                <li id="red5"></li>  
                <li id="red6"></li>  
            </ul>  
        </div>  
        <div style="height: 30px;">  
        </div>  
        <div class="title">  
            蓝球</div>  
        <div>  
            <ul>  
                <li style="width: 598px; text-align: center; color: blue" id="blue1"></li>  
            </ul>  
        </div>  
        <br />  
        <hr />  
        <div class="title">  
            红球</div>  
        <div>  
            <ul>  
                <li id="1red1"></li>  
                <li id="1red2"></li>  
                <li id="1red3"></li>  
                <li id="1red4"></li>  
                <li id="1red5"></li>  
                <li id="1red6"></li>  
            </ul>  
        </div>  
        <div style="height: 30px;">  
        </div>  
        <div class="title">  
            蓝球</div>  
        <div>  
            <ul>  
                <li style="width: 598px; text-align: center; color: blue" id="1blue1"></li>  
            </ul>  
        </div>  
    </div>  
    </form>  
</body>  
</html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <mce:style type="text/css"><!--
        #all
        {
            width: 600px;
            height: 400px;
            margin: 0px;
            padding: 0px;
            margin: 0 auto;
        }
        #all .title
        {
            width: 585px;
            height: 19px;
            line-height: 19px;
            padding-top: 6px;
            font-size: 14px;
            background-color: #cc3399;
            color: White;
            font-weight: bold;
            padding-left: 15px;
        }
        #all ul
        {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            height: 25px;
        }
        #all ul li
        {
            list-style-type: none;
            float: left;
            width: 98px;
            height: 25px;
            border: 1px solid gray;
            text-align: center;
            color: Red;
        }
   
--></mce:style><style type="text/css" mce_bogus="1">        #all
        {
            width: 600px;
            height: 400px;
            margin: 0px;
            padding: 0px;
            margin: 0 auto;
        }
        #all .title
        {
            width: 585px;
            height: 19px;
            line-height: 19px;
            padding-top: 6px;
            font-size: 14px;
            background-color: #cc3399;
            color: White;
            font-weight: bold;
            padding-left: 15px;
        }
        #all ul
        {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            height: 25px;
        }
        #all ul li
        {
            list-style-type: none;
            float: left;
            width: 98px;
            height: 25px;
            border: 1px solid gray;
            text-align: center;
            color: Red;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="all">
        <div style="height: 50px; width: 600px; text-align: center; margin: 30 0;">
            <asp:Button ID="Button1" runat="server" Text="开局" BackColor="Pink" OnClientClick="javascript:ok();okOne(); return false;" /></div>
        <div class="title">
            红球</div>
        <div>
            <ul>
                <li id="red1"></li>
                <li id="red2"></li>
                <li id="red3"></li>
                <li id="red4"></li>
                <li id="red5"></li>
                <li id="red6"></li>
            </ul>
        </div>
        <div style="height: 30px;">
        </div>
        <div class="title">
            蓝球</div>
        <div>
            <ul>
                <li style="width: 598px; text-align: center; color: blue" id="blue1"></li>
            </ul>
        </div>
        <br />
        <hr />
        <div class="title">
            红球</div>
        <div>
            <ul>
                <li id="1red1"></li>
                <li id="1red2"></li>
                <li id="1red3"></li>
                <li id="1red4"></li>
                <li id="1red5"></li>
                <li id="1red6"></li>
            </ul>
        </div>
        <div style="height: 30px;">
        </div>
        <div class="title">
            蓝球</div>
        <div>
            <ul>
                <li style="width: 598px; text-align: center; color: blue" id="1blue1"></li>
            </ul>
        </div>
    </div>
    </form>
</body>
</html>
 

点击页面上方的按钮即可生成双色球号码，运行界面上面的是未修改前的；下面的是修改后的；

最后，这里有几个知识点需要总结一下：

一.Math.Random()  此函数会生成0~1之间的一些浮点型随机数；

在运用此函数的时候会经常用到的一些函数：

  1.Math.floor(a)   结果为小于等于a的最大整数

  2. Math.ceil(a)    结果为大于等于a的最小整数

  3.Math.round(a)  大多情况下我们会认为其为四舍五入的函数，

  正解如下：

1>. 如果参数为正数，且小数点后第一位>=5，运算结果为参数的整数部分+1。
2>. 如果参数为负数，且小数点后第一位>5，运算结果为参数的整数部分-1。
3>. 如果参数为正数，且小数点后第一位<5；或者参数为负数，且小数点后第一位<=5，运算结果为参数的整数部分。

二.[数组].splice()

var a=[1,2,3,4,5,6,7,8,9,10]

1. splice(start,deleteCount,val1,val2,...)：从start位置开始删除deleteCount项，并从该位置起插入val1,val2,...
1>.

     alert( a.splice(0,1,2,7));---弹出1

     alert(a); ---弹出 2,7,2,3,4,5,6,7,8,9,10

2>.

     alert(a.splice(0,1));--弹出2

     alert(a);---弹出 7,2,3,4,5,6,7,8,9 

2.shift()：删除第一项 等同于 a.splice(0,1);

3.pop()：删除最后一项 等同于 a.splice(a.length-1,1)

4.push()：添加 等同于 a.splice(a.length,0,6,7);

5.unshift()：在第一项前插入值 等同于 a.splice(0,0,-2,-1);  var b = a.length;数组长度增长2 在前面加了-2，-1