前面兩篇介紹了兩個非常簡單的排序算法，本篇介紹排序算法的一個簡單應用——對大樂透隨機號碼進行排序。
由於工作中涉及很多前端的開發，所以對前端技術有一定了解，前端的一個好處是可以直觀地看到頁面的布局。每次下班回家的路上總會路過一家彩票代售點，偶爾和同事一起去買幾注機選的，所謂機選，其實就是機器隨機生成的號碼，而且是已經排序好的隨機號碼。於是就萌生了寫一個大樂透號碼生成器的小工具，下面對這個小工具簡單介紹。
這個“大樂透號碼生成器”純前端開發，涉及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> <span id="span12"></span> <span id="span13"></span> <span id="span14"></span> <span id="span15"></span> <span id="span16"></span> <span id="span17"></span><br> 隨機號碼2：<span id="span21"></span> <span id="span22"></span> <span id="span23"></span> <span id="span24"></span> <span id="span25"></span> <span id="span26"></span> <span id="span27"></span><br> 隨機號碼3：<span id="span31"></span> <span id="span32"></span> <span id="span33"></span> <span id="span34"></span> <span id="span35"></span> <span id="span36"></span> <span id="span37"></span><br> 隨機號碼4：<span id="span41"></span> <span id="span42"></span> <span id="span43"></span> <span id="span44"></span> <span id="span45"></span> <span id="span46"></span> <span id="span47"></span><br> 隨機號碼5：<span id="span51"></span> <span id="span52"></span> <span id="span53"></span> <span id="span54"></span> <span id="span55"></span> <span id="span56"></span> <span id="span57"></span><br> </div> <div class="oneStyle"> 排序后碼1：<span id="span61"></span> <span id="span62"></span> <span id="span63"></span> <span id="span64"></span> <span id="span65"></span> <span id="span66"></span> <span id="span67"></span><br> 排序后碼2：<span id="span71"></span> <span id="span72"></span> <span id="span73"></span> <span id="span74"></span> <span id="span75"></span> <span id="span76"></span> <span id="span77"></span><br> 排序后碼3：<span id="span81"></span> <span id="span82"></span> <span id="span83"></span> <span id="span84"></span> <span id="span85"></span> <span id="span86"></span> <span id="span87"></span><br> 排序后碼4：<span id="span91"></span> <span id="span92"></span> <span id="span93"></span> <span id="span94"></span> <span id="span95"></span> <span id="span96"></span> <span id="span97"></span><br> 排序后碼5：<span id="span101"></span> <span id="span102"></span> <span id="span103"></span> <span id="span104"></span> <span id="span105"></span> <span id="span106"></span> <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