php大乐透,JavaScript实现大乐透号码生成的实例分析

这个“大乐透号码生成器”纯前端开发，涉及HTML、JS、CSS。为了简单起见，把所有代码写到了一个html文件中，这样的好处就是可以直接用浏览器打开这个文件，当然实际工作中最好把他们放在不同的文件。整个区域放在一个大的p标签中，表现为一个矩形区域，并通过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中。//插入排序

function bubbleSort(array){

var len = array.length;

for (var i = 0; i < len; i++) {

for (var j = i; j > 0 && array[j]

var swap = array[j]; //第二个for循环使元素比较并移动到合适位置

array[j] = array[j-1];

array[j-1] = swap;

}

} return array;

}

其余的JS以及HTML、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;}

大乐透号码生成器

生成组数：

生成 1 组号码

生成 2 组号码

生成 3 组号码

生成 4 组号码

生成 5 组号码

随机号码1：   

随机号码2：   

随机号码3：   

随机号码4：   

随机号码5：   

排序后码1：   

排序后码2：   

排序后码3：   

排序后码4：   

排序后码5：   

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

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

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]

var swap = array[j]; //第二个for循环使元素比较并移动到合适位置

array[j] = array[j-1];

array[j-1] = swap;

}

} return array;

}

浏览器打开效果：