【代码教程】手机号码抽奖程序

2013-08-18 23:09:28 -0400

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>手机号抽奖程序</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
 
</script>
</head>
<body>
<center>
<div> </div>
<div id="main">
<div>
<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()" 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-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>
 <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-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>三等奖（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-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>
 </body>
</html>

效果如下：
手机号抽奖程序

中奖号码

一等奖（10名）

二等奖（15名）

三等奖（20名）

实用的手机号码抽奖程序，基于JavaScript技术实现，可以分别抽出一、二、三等奖，手机号码存储于JS数组内，你可以自行修改，程序稍改动一下，从数据库读取手机号码然后赋值给数组，再美化一下页面，这样就变成了一个能派上用场的抽奖程序了。

Back to home

| N