Heim > Artikel > Web-Frontend > Beispielanalyse der Verwendung von JavaScript zur Generierung von Lotteriezahlen
Beispielanalyse der Verwendung von JavaScript zur Generierung von Lotteriezahlen
- 黄舟Original
- 2017-10-31 10:02:233797Durchsuche
Dieser „Lotterienummerngenerator“ ist eine reine Frontend-Entwicklung, die HTML, JS und CSS umfasst. Der Einfachheit halber werden alle Codes in eine HTML-Datei geschrieben. Der Vorteil besteht darin, dass die Datei direkt mit einem Browser geöffnet werden kann. In der tatsächlichen Arbeit ist es natürlich am besten, sie in verschiedenen Dateien abzulegen. Der gesamte Bereich wird in einem großen p-Tag platziert, das als rechteckiger Bereich angezeigt wird, und die Anzeigeposition wird über JS gesteuert. Richten Sie eine Dropdown-Liste ein, und Sie können 1-5 generieren Wenn Sie auf die Schaltfläche klicken, können Sie Zahlen generieren, die der Anzahl der Gruppen entsprechen. Der obere Teil ist eine zufällig generierte ungeordnete Zahl und der untere Teil ist eine Zahl nach der Sortierung Diese ungeordneten Zahlen werden durch die Dropdown-Liste oben gesteuert. Der Kern dieses Tools besteht darin, Zufallszahlen zu generieren und die Zufallszahlen zu sortieren, was beides durch JS-Code implementiert wird. Hier sind einige wichtige JS-Codes.
Zufallszahlen generieren: Lotto ist in vordere Bereichszahlen und hintere Bereichszahlen unterteilt. Die vorderen Bereichszahlen sind 5 Zahlen von 01 bis 35 ohne Wiederholung, und die hinteren Bereichszahlen sind von 01 bis 12 ohne Wiederholung 2 Zahlen, um einen Satz von 7-stelligen Zahlen zu bilden. Hier werden zwei Arrays definiert: arr35 speichert die Nummern 01-35 im vorderen Bereich und arr12 speichert die Nummern 01-12 im hinteren Bereich. Verwenden Sie die Methode „temp = Math.floor(Math.random()*arr35.length)“, um eine Zufallszahl von 0-arr35.length als Index zu verwenden, und verwenden Sie arr35[temp], um den Wert der Indexposition abzurufen Auch im Array handelt es sich um eine Zufallszahl, die dann dynamisch zur Spanne hinzugefügt wird, bevor die Sortierung erfolgt, indem die ID abgerufen wird. Verwenden Sie nach dem Abrufen „arr35.splice(temp,1);“, um die Zufallszahl im Array zu löschen und die Länge des Arrays um eins zu reduzieren. Machen Sie eine 5-malige Schleife, um 5 Zufallszahlen von 01-35 ohne Wiederholung zu erhalten, und das Gleiche gilt für die nächsten beiden Ziffern.
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);//删除该位置的值}Zufallszahlensortierung: Hier wird der Einfügungssortierungsalgorithmus verwendet. Er sortiert nur die ersten fünf Ziffern jeder Zahlengruppe. Nach der Sortierung wird sie dynamisch hinzugefügt die sortierte Spanne durch Ermitteln der ID-Mitte.
//插入排序
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;
}Die übrigen JS-, HTML- und CSS-Technologien werden nicht im Detail vorgestellt.
Vollständiger Code:
<!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>
<p id="table">
<p>
<h1 style="text-align:center">大乐透号码生成器</h1>
</p>
<p 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>
</p>
<p 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>
</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; //浏览器可见区域宽
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>Browser-Öffnungseffekt:
Das obige ist der detaillierte Inhalt vonBeispielanalyse der Verwendung von JavaScript zur Generierung von Lotteriezahlen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse