大乐透号码随机生成与排序
2018-06-24 00:39:48来源：未知 阅读 ()
前面两篇介绍了两个非常简单的排序算法，本篇介绍排序算法的一个简单应用——对大乐透随机号码进行排序。
由于工作中涉及很多前端的开发，所以对前端技术有一定了解，前端的一个好处是可以直观地看到页面的布局。每次下班回家的路上总会路过一家彩票代售点，偶尔和同事一起去买几注机选的，所谓机选，其实就是机器随机生成的号码，而且是已经排序好的随机号码。于是就萌生了写一个大乐透号码生成器的小工具，下面对这个小工具简单介绍。
这个“大乐透号码生成器”纯前端开发，涉及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
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- JS简单随机数生成方法 2019-12-29
- 手机号码正则表达式 2019-08-14
- JavaScript_day02 2019-08-14
- 原生JS实现随机点名项目 2019-04-30
- 199，一个被正则表达式遗忘的号码段？ 2019-01-23
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
