抽獎程序在實際生活中廣泛運用，由於應用場景不同抽獎的方式也是多種多樣的。本文將採用實例講解如何利用jQuery+PHP+Mysql實現類似電視中常見的一個簡單的抽獎程序。
本例中的抽獎程序要實現從海量手機號碼中一次隨機抽取一個號碼作爲中獎號碼，可以多次抽獎，被抽中的號碼將不會被再次抽中。抽獎流程：點擊“開始”按鈕後，程序獲取號碼信息，滾動顯示號碼，當點擊“停止”按鈕後，號碼停止滾動，這時顯示的號碼即爲中獎號碼，可以點擊“開始”按鈕繼續抽獎。
HTML
|
1
2
3
4
|
<div id="roll"></div><input type="hidden"
id="mid" value="">
<p><input type="button"
class="btn" id="start"
value="開始"> <input type="button"
class="btn" id="stop"
value="停止"></p> <div id="result"></div> |
上述代碼中，我們需要一個#roll用來顯示滾動號碼，#mid是用來記錄抽中的號碼id，然後就是需要兩個按鈕分別用來“開始”和“停止”動作，最後還需要一個#result顯示抽獎結果。
CSS
|
1
2
3
4
5
6
|
.demo{width:300px; margin:60px auto; text-align:center}
#roll{height:32px; line-height:32px; font-size:24px; color:#f30}
.btn{width:80px; height:26px; line-height:26px; background:url(btn_bg.gif)
repeat-x; border:1px solid #d3d3d3; cursor:pointer}
#stop{display:none} #result{margin-top:20px; line-height:24px; font-size:16px; text-align:center} |
注意，我們默認將按鈕#stop設置爲display:none，是爲了一開始只顯示“開始”按鈕，點擊“開始”後，抽獎進行中，將顯示“停止”按鈕。
jQuery
我們首先要實現的是點擊“開始”按鈕，通過ajax從後臺獲取抽獎用的數據即手機號碼，然後通過定時滾動顯示手機號碼，注意每次顯示的手機號碼是隨機的，也就是說不是按照某種順序出現的，我們看下面的代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
$(function(){
var _gogo;
var start_btn = $("#start");
var stop_btn = $("#stop");
start_btn.click(function(){
$.getJSON('data.php',function(json){
if(json){
var
obj = eval(json);//將JSON字符串轉化爲對象 var
len = obj.length; _gogo = setInterval(function(){
var
num = Math.floor(Math.random()*len);//獲取隨機數 var
id = obj[num]['id']; //隨機id var
v = obj[num]['mobile']; //對應的隨機號碼
$("#roll").html(v);
$("#mid").val(id);
},100);
//每隔0.1秒執行一次 stop_btn.show();
start_btn.hide();
}else{
$("#roll").html('系統找不到數據源，請先導入數據。');
} }); }); }); |
首先我們定義變量，方便後續調用。然後，當點擊“開始”按鈕後，頁面向後臺data.php發送Ajax請求，這裏我們使用jqeury的getJSON來完成異步請求。當後臺返回json數據時，我們通過通過eval() 函數可以將JSON字符串轉化爲對象obj，其實就是將json數據轉換爲數組了。這時，我們使用setInterval做一個定時器，定時器裏需要做的工作是：隨機獲取數組obj中的手機號碼信息，然後顯示在頁面上。然後每隔0.1運行定時器，這樣就達到了滾動顯示抽獎號碼的效果。同時顯示“停止”按鈕，隱藏“開始”按鈕，這時抽獎進行中。
接下來看“停止”動作需要做的工作。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
stop_btn.click(function(){
clearInterval(_gogo);
var mid = $("#mid").val();
$.post("data.php?action=ok",{id:mid},function(msg){
if(msg==1){
var
mobile = $("#roll").html(); $("#result").append("<p>"+mobile+"</p>");
} stop_btn.hide();
start_btn.show();
}); }); |
當單擊“停止”按鈕，意味着抽獎結束。使用clearInterval()函數停止定時器，獲取被抽中號碼的id，然後通過$.post將選中號碼id發送給後臺data.php處理。應爲被抽中的號碼需要在數據庫中標記。如果後臺處理成功，前端將中獎號碼追加到中獎結果中，同時隱藏“停止”按鈕，顯示“開始”按鈕，可以再次抽獎了。
注意，我們使用setInterval()和clearInterval()設置定時器和停止定時器，關於這兩個函數的使用大家可以google或百度下。
PHP
data.php需要做兩件事，一，通過連接數據庫，讀取手機號碼信息（不包好已中獎號碼），然後通過轉換成json格式輸出給前端；二，通過接收前端請求，修改對應的數據庫中的中獎號碼狀態，即標識該號碼已中獎，下次將不再作爲抽獎號碼。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
include_once('connect.php');
//連接數據庫 $action = $_GET['action'];
if($action==""){
//讀取數據，返回json $query
= mysql_query("select * from member where status=0");
while($row=mysql_fetch_array($query)){
$arr[] =
array( 'id'
=> $row['id'], 'mobile'
=> substr($row['mobile'],0,3)."****".substr($row['mobile'],-4,4)
); } echo
json_encode($arr); }else{
//標識中獎號碼 $id =
$_POST['id']; $sql
= "update member set status=1 where id=$id"; $query
= mysql_query($sql); if($query){
echo
'1'; } } |
我們可以看出，數據表member中有個字段叫status，這個字段是用來標識是否中獎。1表示已中獎，0表示未中獎。這個後臺php程序就是操作數據庫，然後返回對應的信息給前端。
MYSQL
最後將member表結構信息附上。
|
1
2
3
4
5
6
|
CREATE TABLE `member` ( `id` int(11) NOT NULL auto_increment,
`mobile` varchar(20) NOT NULL,
`status` tinyint(1) NOT NULL
default '0', PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8; |