大乐透号码随机生成与排序

        前面两篇介绍了两个非常简单的排序算法,本篇介绍排序算法的一个简单应用——对大乐透随机号码进行排序。

        由于工作中涉及很多前端的开发,所以对前端技术有一定了解,前端的一个好处是可以直观地看到页面的布局。每次下班回家的路上总会路过一家彩票代售点,偶尔和同事一起去买几注机选的,所谓机选,其实就是机器随机生成的号码,而且是已经排序好的随机号码。于是就萌生了写一个大乐透号码生成器的小工具,下面对这个小工具简单介绍。

        这个“大乐透号码生成器”纯前端开发,涉及HTML、JS、CSS。为了简单起见,把所有代码写到了一个html文件中,这样的好处就是可以直接用浏览器打开这个文件,当然实际工作中最好把他们放在不同的文件。整个区域放在一个大的div标签中,表现为一个矩形区域,并通过JS控制显示的位置;设置一个下拉列表,可以选择生成1-5组随机号码,当点击按钮后,就能生成相应组数的号码;号码区域分两部分,上面部分是随机生成的无序的号码,下面部分是对这些无序号码进行排序后的号码,生成组数受上面下拉列表控制。这个工具的核心是生成随机号码和对随机号码进行排序,这两步都是通过JS代码实现的。下面介绍一些重要的JS代码。

        生成随机号码:大乐透分前区号码和后区号码,前区号码是从01-35中无重复地取5个号码,后区号码是从01-12中无重复地取2个号码,组成一组7位的号码。这里定义了两个数组:arr35存放前区的01-35号码,arr12存放后区的01-12号码。通过“temp = Math.floor(Math.random()*arr35.length)”方法从0-arr35.length取一个随机数作为索引,通过arr35[temp]即可获取数组中该索引位置的值,也就是随机号码,然后通过获取id动态添加到排序前的span中。取完以后通过“arr35.splice(temp,1);”即可删除数组中该随机数,同时使数组长度减一。循环5次即可从01-35中无重复地取5个随机号码,后面两位同样如此。

var arr35 = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17",
                           "18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35"];
var arr12 = ["01","02","03","04","05","06","07","08","09","10","11","12"];
var span = "";
var temp = "";
for(var i=1;i<6;i++){
    span = "span" + x + i;
    temp = Math.floor(Math.random()*arr35.length);//随机取一个数
    document.getElementById(span).innerText = arr35[temp];
    document.getElementById(span).style.backgroundColor = "red";
    arr35.splice(temp,1);//删除该位置的值
}

        随机号码排序:这里用到了插入排序算法,只是对每组号码的前五位进行排序,数据量很小,排序完之后通过获取id动态添加到排序后的span中。有关插入排序算法,请见:http://www.cnblogs.com/Y-oung/p/7745197.html

//插入排序
function bubbleSort(array){
    var len = array.length;
    for (var i = 0; i < len; i++) {
        for (var j = i; j > 0 && array[j]<array[j-1]; j--) {
            var swap = array[j];  //第二个for循环使元素比较并移动到合适位置
            array[j] = array[j-1];
            array[j-1] = swap;
        }
    }
    return array;
}

其余的JS以及HTML、CSS技术不再详细介绍。

        完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大乐透号码生成器</title>
<style type="text/css">
#table
{width:800px; height:500px;margin:10px;border:2px solid #000000;box-shadow: 10px 10px 5px;border-radius:50px;}
.buttonStyle
{height:40px;margin:20px;font-size:20px;background-color:#6495ED;color:white;border-radius:10px;}
.oneStyle
{margin-left:200px;margin-top:10px;font-family:sans-serif;font-size:20px;}
span
{border-radius: 50%;color: #FFFFFF;padding:3px;font-size:13px;}
</style>
</head>
<body>
    <div id="table">
        <div>
            <h1 style="text-align:center">大乐透号码生成器</h1>
        </div>
        <div class="oneStyle">
                        生成组数:<select id="zushu" style="width:150px;height:30px;margin:10px;" onchange="select()">
                        <option value="1">生成 1 组号码</option>
                        <option value="2">生成 2 组号码</option>
                        <option value="3">生成 3 组号码</option>
                        <option value="4">生成 4 组号码</option>
                        <option value="5">生成 5 组号码</option>
                    </select>
        </div>
        <div class="oneStyle">
                        随机号码1:<span id="span11"></span>&nbsp;<span id="span12"></span>&nbsp;<span id="span13"></span>&nbsp;<span id="span14"></span>&nbsp;<span id="span15"></span>
                        &nbsp;&nbsp;&nbsp;<span id="span16"></span>&nbsp;<span id="span17"></span><br>
                        随机号码2:<span id="span21"></span>&nbsp;<span id="span22"></span>&nbsp;<span id="span23"></span>&nbsp;<span id="span24"></span>&nbsp;<span id="span25"></span>
                        &nbsp;&nbsp;&nbsp;<span id="span26"></span>&nbsp;<span id="span27"></span><br>
                        随机号码3:<span id="span31"></span>&nbsp;<span id="span32"></span>&nbsp;<span id="span33"></span>&nbsp;<span id="span34"></span>&nbsp;<span id="span35"></span>
                        &nbsp;&nbsp;&nbsp;<span id="span36"></span>&nbsp;<span id="span37"></span><br>
                        随机号码4:<span id="span41"></span>&nbsp;<span id="span42"></span>&nbsp;<span id="span43"></span>&nbsp;<span id="span44"></span>&nbsp;<span id="span45"></span>
                        &nbsp;&nbsp;&nbsp;<span id="span46"></span>&nbsp;<span id="span47"></span><br>
                        随机号码5:<span id="span51"></span>&nbsp;<span id="span52"></span>&nbsp;<span id="span53"></span>&nbsp;<span id="span54"></span>&nbsp;<span id="span55"></span>
                        &nbsp;&nbsp;&nbsp;<span id="span56"></span>&nbsp;<span id="span57"></span><br>
        </div>
        <div class="oneStyle">
                        排序后码1:<span id="span61"></span>&nbsp;<span id="span62"></span>&nbsp;<span id="span63"></span>&nbsp;<span id="span64"></span>&nbsp;<span id="span65"></span>
                        &nbsp;&nbsp;&nbsp;<span id="span66"></span>&nbsp;<span id="span67"></span><br>
                        排序后码2:<span id="span71"></span>&nbsp;<span id="span72"></span>&nbsp;<span id="span73"></span>&nbsp;<span id="span74"></span>&nbsp;<span id="span75"></span>
                        &nbsp;&nbsp;&nbsp;<span id="span76"></span>&nbsp;<span id="span77"></span><br>
                        排序后码3:<span id="span81"></span>&nbsp;<span id="span82"></span>&nbsp;<span id="span83"></span>&nbsp;<span id="span84"></span>&nbsp;<span id="span85"></span>
                        &nbsp;&nbsp;&nbsp;<span id="span86"></span>&nbsp;<span id="span87"></span><br>
                        排序后码4:<span id="span91"></span>&nbsp;<span id="span92"></span>&nbsp;<span id="span93"></span>&nbsp;<span id="span94"></span>&nbsp;<span id="span95"></span>
                        &nbsp;&nbsp;&nbsp;<span id="span96"></span>&nbsp;<span id="span97"></span><br>
                        排序后码5:<span id="span101"></span>&nbsp;<span id="span102"></span>&nbsp;<span id="span103"></span>&nbsp;<span id="span104"></span>&nbsp;<span id="span105"></span>
                        &nbsp;&nbsp;&nbsp;<span id="span106"></span>&nbsp;<span id="span107"></span><br>
        </div>
        <div style="text-align:center">
            <input class="buttonStyle" id="fiveNumber" type="button" onclick="number()">
        </div>
    </div>
    <script type="text/javascript">
        var table = document.getElementById("table");
        var width = document.documentElement.clientWidth;  //浏览器可见区域宽
        var height = document.documentElement.clientHeight;  //浏览器可见区域高
        table.style.marginLeft = ((width-800)/2)+"px";
        table.style.marginTop = ((height-700)/2)+"px";
        var val = "1";
        document.getElementById("fiveNumber").setAttribute("title","生成 1 组号码");
        document.getElementById("fiveNumber").setAttribute("value","生成 1 组号码");
        
        //随机生成五组号码
        function select()
        {
            val = document.getElementById("zushu").value;
            var des = "生成 " + val + " 组号码";
            document.getElementById("fiveNumber").setAttribute("title",des);
            document.getElementById("fiveNumber").setAttribute("value",des);
        }
        //随机生成五组号码
        function number()
        {
            for(var n=1;n<11;n++){
                for(var m=1;m<8;m++){
                    var a = "span" + n + m;
                    document.getElementById(a).innerText = "";//每次点击按钮先清空上一次数据
                    document.getElementById(a).style.backgroundColor = "white";
                }
            }
            for(var x=1;x<(parseInt(val)+1);x++){
                //从35个号码里面无放回地取5位
                var arr35 = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17",
                           "18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35"];
                //从12个号码里面无放回地取2位
                var arr12 = ["01","02","03","04","05","06","07","08","09","10","11","12"];
                var span = "";
                var temp = "";
                for(var i=1;i<6;i++){
                    span = "span" + x + i;
                    temp = Math.floor(Math.random()*arr35.length);//随机取一个数
                    document.getElementById(span).innerText = arr35[temp];
                    document.getElementById(span).style.backgroundColor = "red";
                    arr35.splice(temp,1);//删除该位置的值
                }
                for(var j=6;j<8;j++){
                    span = "span" + x + j;
                    temp = Math.floor(Math.random()*arr12.length);//随机取一个数
                    document.getElementById(span).innerText = arr12[temp];
                    document.getElementById(span).style.backgroundColor = "blue";
                    arr12.splice(temp,1);//删除该位置的值
                }
            }
            for(var x=1;x<(parseInt(val)+1);x++){
                var span = "";
                //前五位排序
                var arr = new Array(5);
                for(var y=0;y<5;y++){
                    span = "span" + x + (y+1);
                    arr[y] = document.getElementById(span).lastChild.nodeValue;
                }
                var a = bubbleSort(arr);
                for(var l=0;l<5;l++){
                    span = "span" + (x+5) + (l+1);
                    document.getElementById(span).innerText = a[l];
                    document.getElementById(span).style.backgroundColor = "red";
                }
                //后两位排序
                var spann6 = "span" + x + "6";
                var spann7 = "span" + x + "7";
                var spanm6 = "span" + (x+5) + "6";
                var spanm7 = "span" + (x+5) + "7";
                var span6 = document.getElementById(spann6).lastChild.nodeValue;
                var span7 = document.getElementById(spann7).lastChild.nodeValue;
                if(parseInt(span6) > parseInt(span7)){
                    document.getElementById(spanm6).innerText = span7;
                    document.getElementById(spanm7).innerText = span6;
                }else{
                    document.getElementById(spanm6).innerText = span6;
                    document.getElementById(spanm7).innerText = span7;
                }
                document.getElementById(spanm6).style.backgroundColor = "blue";
                document.getElementById(spanm7).style.backgroundColor = "blue";
            }
        }
        //插入排序
        function bubbleSort(array){
            var len = array.length;
            for (var i = 0; i < len; i++) {
                for (var j = i; j > 0 && array[j]<array[j-1]; j--) {
                       var swap = array[j];  //第二个for循环使元素比较并移动到合适位置
                       array[j] = array[j-1];
                       array[j-1] = swap;
                }
            }
            return array;
        }
    </script>
</body>
</html>

        浏览器打开效果:

        转载请注明出处 http://www.cnblogs.com/Y-oung/p/7756851.html

        工作、学习、交流或有任何疑问,请联系邮箱:yy1340128046@163.com

 

转载于:https://www.cnblogs.com/Y-oung/p/7756851.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值