用Javascript輕松制作一套簡單的抽獎系統

2024-09-06 12:44:16

字體：大中小

來源：轉載

供稿：網友

作者：jegg
　　年底將至，許多公司忙著搞年會，會上一般都會有一些抽獎活動，下面的程序就是用javascript 寫的一個簡單的抽獎系統與大家共享。
　　此代碼借鑒了網上的一些網友的代碼，又加上了一些諸如不重復抽獎之類的改進。大概思路如下：
　　1.將所有的的抽獎數據（這里為手機號碼）存入數組中。
　　2.使用random 函數隨機產生該數組的INDEX
　　3.使用setInterval 函數以極短的時間間隔產生該數組隨機INDEX所對應的手機號碼，并顯示。
4.使用removeEleAt（index）函數刪除隨機產生過的手機號碼。并且重新組織生成剩余的手機號碼為一個新的數組，為下次使用。
　　使用方法：
　　將以下原代碼拷到寫字板上，然后將txt屬性該成html即可。如果出現顯示亂碼，請改變網頁編碼（查看--編碼）。
　　原代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN"> <html> <head> <title> 2006年會抽獎系統</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  </head> <body> <center>       <h1>中獎號碼</h1>    <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>一等獎（10名）</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>            </SPAN>
</div>
</div>
<div   id="iggaaok"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="4q8sy4k"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-06/1562140.html'>URI、URL和URN之間的區別與聯系</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-06/1562142.html'>在window.setTimeout方法中傳送對象</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="gqcuki6"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流