熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> Javascript >> 正文

用Javascript輕松制作抽獎系統

2022-06-13   來源: Javascript 
年底將至許多公司忙著搞年會會上一般都會有一些抽獎活動下面的程序就是用JAVASCRIPT 寫的一個簡單的抽獎系統與大家共享

  此代碼借鑒了網上的一些網友的代碼又加上了一些諸如不重復抽獎之類的改進大概思路如下

  將所有的的抽獎數據(這裡為手機號碼)存入數組中
  使用random 函數隨機產生該數組的INDEX
  使用setInterval 函數以極短的時間間隔產生該數組隨機INDEX所對應的手機號碼並顯示
  使用removeEleAt(index)函數刪除隨機產生過的手機號碼並且重新組織生成剩余的手機號碼為一個新的數組為下次使用

  使用方法

  將以下原代碼拷到寫字板上然後將txt屬性該成html即可如果出現顯示亂碼請改變網頁編碼(查看編碼)

  原代碼如下

  <!DOCTYPE HTML PUBLIC //WC//DTD HTML TRANSITIONAL//EN>
<html>
<head>
<title> 年會抽獎系統</title>
<meta httpequiv=ContentType content=text/html; charset=utf>
<script language=javascript>
 
// global variables
var timer;
var flag = new Array();
var existingnum = new Array();
var clickTimes = ;
var randnum;
var cellnum =;
var mobile = new Array();
// set data here!!
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;

  mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
mobile[]=;
var num = mobilelength;
function getRandNum(){
documentgetElementById(result)value = mobile[GetRnd(num)];
}
function start(){
clearInterval(timer);
timer = setInterval(change());
}
function ok(){
clearInterval(timer);
}
function GetRnd(minmax){
 
randnum = parseInt(Mathrandom()*(maxmin+));
return randnum;
}
function setTimer(){
 timer = setInterval(getRandNum(););
 documentgetElementById(start)disabled = true;
 documentgetElementById(end)disabled = false;
}
function clearTimer(){
 noDupNum();
 clearInterval(timer);
 documentgetElementById(start)disabled = false;
 documentgetElementById(end)disabled = true;
 
}

  function noDupNum(){
 // to remove the selected mobile phone number
 mobileremoveEleAt(randnum);
 
 // to reorganize the mobile number array!!
 var o = ;
 for(p=; p<mobilelength;p++){
 if(typeof mobile[p]!=undefined){
 mobile[o] = mobile[p];
 o++;
 }
 }
 num = mobilelength;
 }
// method to remove the element in the array
ArrayprototyperemoveEleAt = function(dx)
 {
 if(isNaN(dx)||dx>thislength){return false;}
 thissplice(dx);
 }
// set mobile phone numbers to the table cell
function setValues(){
 documentgetElementById(cellnum)value = documentgetElementById(result)value ;
 cellnum++;
 }
</script>
</head>
<body>
<center>
<div> </div>
<div id=main>
 <div>
 <h>中獎號碼</h>
 
 <p>
 <input id=result type=text size= readonly/></p>
 <p>
 <input id=start type=button value=開始 onclick=setTimer() />
 <input id=end type=button value= onclick=clearTimer();setValues(); disabled/>
</p>
 <p><strong>一等獎(名)</strong></p>
 <table width= height= border=>
 <tr>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 </tr>
 <tr>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 </tr>
 </table>
 <p>二等獎(名)</p>
 <table width= height= border=>
 <tr>

  <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 </tr>
 <tr>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 </tr>
 <tr>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 </tr>
 </table>
 <p>三等獎(名)</p>
 <table width= height= border=>
 <tr>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 </tr>
 <tr>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 </tr>
 <tr>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 </tr>
 <tr>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 <td><input name=text type=text id= size= readonly/></td>
 </tr>
 </table>
 <p> </p>
 <p> </p>
 <p> </p>
 </div>
</div>
<center>
 </body>
</html>


From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/11135.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.