Home >Web Front-end >JS Tutorial >Use Javascript to easily create a simple lottery system_javascript skills

Use Javascript to easily create a simple lottery system_javascript skills

WBOYOriginal: 2016-05-16 19:23:161361browse

Author: jegg
The end of the year is approaching, and many companies are busy holding annual meetings. There will usually be some lottery activities at the meeting. The following program is a simple lottery system written in javascript to share with everyone.
This code draws on the codes of some netizens on the Internet, and adds some improvements such as no repeated draws. The general idea is as follows:
1. Store all lottery data (here, mobile phone number) into an array.
2. Use the random function to randomly generate the INDEX of the array
3. Use the setInterval function to generate the mobile phone number corresponding to the random INDEX of the array at a very short time interval and display it.
4. Use the removeEleAt(index) function to delete randomly generated mobile phone numbers. And reorganize and generate the remaining mobile phone numbers into a new array for next use.
How to use:
Copy the following original code to the writing board, and then change the txt attribute to html. If garbled characters appear, please change the web page encoding (View - Encoding).
The original code is as follows:

<title> 2006 Annual Meeting Lottery System </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<center>
<div>
</div> <div id="main">
<div>
 <h1>
 </h1>Winning Number<p>
  
 <input id="result" type="text" size="30" style="height:130px;width:800px;border:2px solid red;font- 
size:120;" readonly>
 </p>
<p>
 <input id="start" type="button" value="开始" style="border: 1px solid; border-color: #aaa 000 #000  
#aaa;width:4em; background: #fc0;" onclick="setTimer()">
 <input id="end" type="button" value="停" style="border: 1px solid; border-color: #aaa 000 #000  
#aaa;width:4em; background: #fc0;" onclick="clearTimer();setValues();" disabled>
 </p>
<p>
 <strong></strong>First Prize (10 people)</p>
<table width="946" height="79" border="1"> 
 <tr> 
 <td><input name="text36" type="text" id="36" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="28" readonly></td> 
 <td><input name="text37" type="text" id="37" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text38" type="text" id="38" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text39" type="text" id="39" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text40" type="text" id="40" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 </tr> 
 <tr> 
 <td><input name="text41" type="text" id="41" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="28" readonly></td> 
 <td><input name="text42" type="text" id="42" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text43" type="text" id="43" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text44" type="text" id="44" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text45" type="text" id="45" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 </tr> 
 </table>
 <script language="javascript"> 
  
// global variables  
var timer; 
var flag = new Array(100); 
var existingnum = new Array(100); 
var clickTimes = 0; 
var randnum; 
var cellnum =1; 
var mobile = new Array(); 
// set data here!! 
mobile[0]=13020000100; 
mobile[1]=13020000101; 
mobile[2]=13020000102; 
mobile[3]=13020000103; 
mobile[4]=13020000104; 
mobile[5]=13020000105; 
mobile[6]=13020000106; 
mobile[7]=13020000107; 
mobile[8]=13020000108; 
mobile[9]=13020000109; 
mobile[10]=13020000110; 
mobile[11]=13020000111; 
mobile[12]=13020000112; 
mobile[13]=13020000113; 
mobile[14]=13020000114; 
mobile[15]=13020000115;

mobile[16]=13020000116; 
mobile[17]=13020000117; 
mobile[18]=13020000118; 
mobile[19]=13020000119; 
mobile[20]=13020000120; 
mobile[21]=13020000121; 
mobile[22]=13020000122; 
mobile[23]=13020000123; 
mobile[24]=13020000124; 
mobile[25]=13020000125; 
mobile[26]=13020000126; 
mobile[27]=13020000127; 
mobile[28]=13020000128; 
mobile[29]=13020000129; 
mobile[30]=13020000130; 
mobile[31]=13020000131; 
mobile[32]=13020000132; 
mobile[33]=13020000133; 
mobile[34]=13020000134; 
mobile[35]=13020000135; 
mobile[36]=13020000136; 
mobile[37]=13020000137; 
mobile[38]=13020000138; 
mobile[39]=13020000139; 
mobile[40]=13020000140; 
mobile[41]=13020000141; 
mobile[42]=13020000142; 
mobile[43]=13020000143; 
mobile[44]=13020000144; 
mobile[45]=13020000145; 
mobile[46]=13020020146; 
var num = mobile.length-1; 
function getRandNum(){ 
document.getElementById("result").value = mobile[GetRnd(0,num)]; 
} 
function start(){ 
clearInterval(timer); 
timer = setInterval('change()',50);  
} 
function ok(){ 
clearInterval(timer); 
} 
function GetRnd(min,max){ 
  
randnum = parseInt(Math.random()*(max-min+1)); 
return randnum; 
} 
function setTimer(){ 
 timer = setInterval("getRandNum();",10); 
 document.getElementById("start").disabled = true; 
 document.getElementById("end").disabled = false; 
} 
function clearTimer(){ 
 noDupNum(); 
 clearInterval(timer); 
 document.getElementById("start").disabled = false; 
 document.getElementById("end").disabled = true; 
  
}

<td><input name="text21" type="text" id="21" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="28" readonly></td> 
 <td><input name="text22" type="text" id="22" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text23" type="text" id="23" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text24" type="text" id="24" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text25" type="text" id="25" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 </tr> 
 <tr> 
 <td><input name="text26" type="text" id="26" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="28" readonly></td> 
 <td><input name="text27" type="text" id="27" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text28" type="text" id="28" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text29" type="text" id="29" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text30" type="text" id="30" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 </tr> 
 <tr> 
 <td><input name="text31" type="text" id="31" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="28" readonly></td> 
 <td><input name="text32" type="text" id="32" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text33" type="text" id="33" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text34" type="text" id="34" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text35" type="text" id="35" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 </tr> 
 </table>
<p>Third Prize (20 people)</p>
 <table width="961" height="102" border="1"> 
 <tr> 
 <td><input name="text1" type="text" id="1" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="28" readonly></td> 
 <td><input name="text2" type="text" id="2" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text3" type="text" id="3" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text4" type="text" id="4" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text5" type="text" id="5" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 </tr> 
 <tr> 
 <td><input name="text6" type="text" id="6" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="28" readonly></td> 
 <td><input name="text7" type="text" id="7" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text8" type="text" id="8" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text9" type="text" id="9" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text10" type="text" id="10" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 </tr> 
 <tr> 
 <td><input name="text11" type="text" id="11" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="28" readonly></td> 
 <td><input name="text12" type="text" id="12" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text13" type="text" id="13" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text14" type="text" id="14" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text15" type="text" id="15" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 </tr> 
 <tr> 
 <td><input name="text16" type="text" id="16" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="28" readonly></td> 
 <td><input name="text17" type="text" id="17" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text18" type="text" id="18" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text19" type="text" id="19" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 <td><input name="text20" type="text" id="20" style="height:30px;width:190px;border:1px solid red;font- 
size:25;" size="20" readonly></td> 
 </tr> 
 </table>
 <p> </p>
 <p> </p>
 <p> </p>
 </div>
</div>
<center>

</center>
</center>

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Javascript MD4_BasicsNext article：Javascript MD4_Basics

See more

Use Javascript to easily create a simple lottery system_javascript skills

Related articles