JavaScript實(shí)現(xiàn)大樂(lè)透號(hào)碼生成的實(shí)例分析

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:11:34

JavaScript實(shí)現(xiàn)大樂(lè)透號(hào)碼生成的實(shí)例分析

JavaScript實(shí)現(xiàn)大樂(lè)透號(hào)碼生成的實(shí)例分析:這個(gè)大樂(lè)透號(hào)碼生成器純前端開(kāi)發(fā)，涉及HTML、JS、CSS。為了簡(jiǎn)單起見(jiàn)，把所有代碼寫(xiě)到了一個(gè)html文件中，這樣的好處就是可以直接用瀏覽器打開(kāi)這個(gè)文件，當(dāng)然實(shí)際工作中最好把他們放在不同的文件。整個(gè)區(qū)域放在一個(gè)大的p標(biāo)簽中，表現(xiàn)為一個(gè)矩形區(qū)域，并通過(guò)

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JavaScript實(shí)現(xiàn)大樂(lè)透號(hào)碼生成的實(shí)例分析:這個(gè)大樂(lè)透號(hào)碼生成器純前端開(kāi)發(fā)，涉及HTML、JS、CSS。為了簡(jiǎn)單起見(jiàn)，把所有代碼寫(xiě)到了一個(gè)html文件中，這樣的好處就是可以直接用瀏覽器打開(kāi)這個(gè)文件，當(dāng)然實(shí)際工作中最好把他們放在不同的文件。整個(gè)區(qū)域放在一個(gè)大的p標(biāo)簽中，表現(xiàn)為一個(gè)矩形區(qū)域，并通過(guò)

這個(gè)“大樂(lè)透號(hào)碼生成器”純前端開(kāi)發(fā)，涉及HTML、JS、CSS。為了簡(jiǎn)單起見(jiàn)，把所有代碼寫(xiě)到了一個(gè)html文件中，這樣的好處就是可以直接用瀏覽器打開(kāi)這個(gè)文件，當(dāng)然實(shí)際工作中最好把他們放在不同的文件。整個(gè)區(qū)域放在一個(gè)大的p標(biāo)簽中，表現(xiàn)為一個(gè)矩形區(qū)域，并通過(guò)JS控制顯示的位置；設(shè)置一個(gè)下拉列表，可以選擇生成1-5組隨機(jī)號(hào)碼，當(dāng)點(diǎn)擊按鈕后，就能生成相應(yīng)組數(shù)的號(hào)碼；號(hào)碼區(qū)域分兩部分，上面部分是隨機(jī)生成的無(wú)序的號(hào)碼，下面部分是對(duì)這些無(wú)序號(hào)碼進(jìn)行排序后的號(hào)碼，生成組數(shù)受上面下拉列表控制。這個(gè)工具的核心是生成隨機(jī)號(hào)碼和對(duì)隨機(jī)號(hào)碼進(jìn)行排序，這兩步都是通過(guò)JS代碼實(shí)現(xiàn)的。下面介紹一些重要的JS代碼。

生成隨機(jī)號(hào)碼：大樂(lè)透分前區(qū)號(hào)碼和后區(qū)號(hào)碼，前區(qū)號(hào)碼是從01-35中無(wú)重復(fù)地取5個(gè)號(hào)碼，后區(qū)號(hào)碼是從01-12中無(wú)重復(fù)地取2個(gè)號(hào)碼，組成一組7位的號(hào)碼。這里定義了兩個(gè)數(shù)組：arr35存放前區(qū)的01-35號(hào)碼，arr12存放后區(qū)的01-12號(hào)碼。通過(guò)“temp = Math.floor(Math.random()*arr35.length)”方法從0-arr35.length取一個(gè)隨機(jī)數(shù)作為索引，通過(guò)arr35[temp]即可獲取數(shù)組中該索引位置的值，也就是隨機(jī)號(hào)碼，然后通過(guò)獲取id動(dòng)態(tài)添加到排序前的span中。取完以后通過(guò)“arr35.splice(temp,1);”即可刪除數(shù)組中該隨機(jī)數(shù)，同時(shí)使數(shù)組長(zhǎng)度減一。循環(huán)5次即可從01-35中無(wú)重復(fù)地取5個(gè)隨機(jī)號(hào)碼，后面兩位同樣如此。

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);//隨機(jī)取一個(gè)數(shù)
 document.getElementById(span).innerText = arr35[temp];
 document.getElementById(span).style.backgroundColor = "red";
 arr35.splice(temp,1);//刪除該位置的值}

隨機(jī)號(hào)碼排序：這里用到了插入排序算法，只是對(duì)每組號(hào)碼的前五位進(jìn)行排序，數(shù)據(jù)量很小，排序完之后通過(guò)獲取id動(dòng)態(tài)添加到排序后的span中。

//插入排序
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]; //第二個(gè)for循環(huán)使元素比較并移動(dòng)到合適位置
 array[j] = array[j-1];
 array[j-1] = swap;
 }
 } return array;
}

其余的JS以及HTML、CSS技術(shù)不再詳細(xì)介紹。

完整代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大樂(lè)透號(hào)碼生成器</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>
 <p id="table">
 <p>
 <h1 style="text-align:center">大樂(lè)透號(hào)碼生成器</h1>
 </p>
 <p class="oneStyle">
 生成組數(shù)：<select id="zushu" style="width:150px;height:30px;margin:10px;" onchange="select()">
 <option value="1">生成 1 組號(hào)碼</option>
 <option value="2">生成 2 組號(hào)碼</option>
 <option value="3">生成 3 組號(hào)碼</option>
 <option value="4">生成 4 組號(hào)碼</option>
 <option value="5">生成 5 組號(hào)碼</option>
 </select>
 </p>
 <p class="oneStyle">
 隨機(jī)號(hào)碼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>
 隨機(jī)號(hào)碼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>
 隨機(jī)號(hào)碼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>
 隨機(jī)號(hào)碼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>
 隨機(jī)號(hào)碼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>
 </p>
 <p 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>
 </p>
 <p style="text-align:center">
 <input class="buttonStyle" id="fiveNumber" type="button" onclick="number()">
 </p>
 </p>
 <script type="text/javascript">
 var table = document.getElementById("table"); 
 var width = document.documentElement.clientWidth; //瀏覽器可見(jiàn)區(qū)域?qū)? var height = document.documentElement.clientHeight; //瀏覽器可見(jiàn)區(qū)域高 
 table.style.marginLeft = ((width-800)/2)+"px"; 
 table.style.marginTop = ((height-700)/2)+"px";
 var val = "1";
 document.getElementById("fiveNumber").setAttribute("title","生成 1 組號(hào)碼");
 document.getElementById("fiveNumber").setAttribute("value","生成 1 組號(hào)碼"); 
 //隨機(jī)生成五組號(hào)碼
 function select()
 {
 val = document.getElementById("zushu").value; 
 var des = "生成 " + val + " 組號(hào)碼";
 document.getElementById("fiveNumber").setAttribute("title",des);
 document.getElementById("fiveNumber").setAttribute("value",des);
 } //隨機(jī)生成五組號(hào)碼
 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 = "";//每次點(diǎn)擊按鈕先清空上一次數(shù)據(jù) 
 document.getElementById(a).style.backgroundColor = "white";
 }
 } for(var x=1;x<(parseInt(val)+1);x++){ //從35個(gè)號(hào)碼里面無(wú)放回地取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個(gè)號(hào)碼里面無(wú)放回地取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);//隨機(jī)取一個(gè)數(shù) 
 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);//隨機(jī)取一個(gè)數(shù) 
 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]; //第二個(gè)for循環(huán)使元素比較并移動(dòng)到合適位置 
 array[j] = array[j-1];
 
 array[j-1] = swap;
 }
 } return array;
 } </script></body></html>

瀏覽器打開(kāi)效果：