用Javascript輕鬆製作一套簡單的抽獎系統
來源:互聯網
上載者:User
作者:jegg
年底將至,許多公司忙著搞年會,會上一般都會有一些抽獎活動,下面的程式就是用javascript 寫的一個簡單的抽獎系統與大家共用。
此代碼借鑒了網上的一些網友的代碼,又加上了一些諸如不重複抽獎之類的改進。大概思路如下:
1.將所有的的抽獎資料(這裡為手機號碼)存入數組中。
2.使用random 函數隨機產生該數組的INDEX
3.使用setInterval 函數以極短的時間間隔產生該數組隨機INDEX所對應的手機號碼,並顯示。
4.使用removeEleAt(index)函數刪除隨機產生過的手機號碼。並且重新組織產生剩餘的手機號碼為一個新的數組,為下次使用。
使用方法:
將以下原代碼拷到寫字板上,然後將txt屬性該成html即可。如果出現顯示亂碼,請改變網頁編碼(查看--編碼)。
原代碼如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><center> </p> 中獎號碼<p> <input id="result" type="text" size="30" style="height:130px;width:800px;border:2px solid red;font-<br />size:120;" readonly></p><p> <input id="start" type="button" value="開始" style="border: 1px solid; border-color: #aaa 000 #000<br />#aaa;width:4em; background: #fc0;" onclick="setTimer()"><input id="end" type="button" value="停" style="border: 1px solid; border-color: #aaa 000 #000<br />#aaa;width:4em; background: #fc0;" onclick="clearTimer();setValues();" disabled></p><p><strong>一等獎(10名)</strong></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-<br />size:25;" size="28" readonly></td><td><input name="text37" type="text" id="37" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text38" type="text" id="38" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text39" type="text" id="39" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text40" type="text" id="40" style="height:30px;width:190px;border:1px solid red;font-<br />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-<br />size:25;" size="28" readonly></td><td><input name="text42" type="text" id="42" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text43" type="text" id="43" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text44" type="text" id="44" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text45" type="text" id="45" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td></tr></table><p>二等獎(15名)</p><table width="951" height="88" border="1"><tr><td><input name="text21" type="text" id="21" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="28" readonly></td><td><input name="text22" type="text" id="22" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text23" type="text" id="23" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text24" type="text" id="24" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text25" type="text" id="25" style="height:30px;width:190px;border:1px solid red;font-<br />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-<br />size:25;" size="28" readonly></td><td><input name="text27" type="text" id="27" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text28" type="text" id="28" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text29" type="text" id="29" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text30" type="text" id="30" style="height:30px;width:190px;border:1px solid red;font-<br />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-<br />size:25;" size="28" readonly></td><td><input name="text32" type="text" id="32" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text33" type="text" id="33" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text34" type="text" id="34" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text35" type="text" id="35" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td></tr></table><p>三等獎(20名)</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-<br />size:25;" size="28" readonly></td><td><input name="text2" type="text" id="2" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text3" type="text" id="3" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text4" type="text" id="4" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text5" type="text" id="5" style="height:30px;width:190px;border:1px solid red;font-<br />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-<br />size:25;" size="28" readonly></td><td><input name="text7" type="text" id="7" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text8" type="text" id="8" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text9" type="text" id="9" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text10" type="text" id="10" style="height:30px;width:190px;border:1px solid red;font-<br />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-<br />size:25;" size="28" readonly></td><td><input name="text12" type="text" id="12" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text13" type="text" id="13" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text14" type="text" id="14" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text15" type="text" id="15" style="height:30px;width:190px;border:1px solid red;font-<br />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-<br />size:25;" size="28" readonly></td><td><input name="text17" type="text" id="17" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text18" type="text" id="18" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text19" type="text" id="19" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td><td><input name="text20" type="text" id="20" style="height:30px;width:190px;border:1px solid red;font-<br />size:25;" size="20" readonly></td></tr></table></p></p><p><center><br /> </center></center>