HTML

?

上述代碼中，我們需要一個#roll用來顯示滾動號碼，#mid是用來記錄抽中的號碼id，然后就是需要兩個按鈕分別用來“開始”和“停止”動作，最后還需要一個#result顯示抽獎結(jié)果。

CSS

我們使用簡單的css來修飾html頁面。

.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}

注意，我們默認(rèn)將按鈕#stop設(shè)置為display:none，是為了一開始只顯示“開始”按鈕，點(diǎn)擊“開始”后，抽獎進(jìn)行中，將顯示“停止”按鈕。

jQuery

我們首先要實現(xiàn)的是點(diǎn)擊“開始”按鈕，通過ajax從后臺獲取抽獎用的數(shù)據(jù)即手機(jī)號碼，然后通過定時滾動顯示手機(jī)號碼，注意每次顯示的手機(jī)號碼是隨機(jī)的，也就是說不是按照某種順序出現(xiàn)的，我們看下面的代碼：

$(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字符串轉(zhuǎn)化為對象?????????????????var?len?=?obj.length;?????????????????_gogo?=?setInterval(function(){?????????????????????var?num?=?Math.floor(Math.random()*len);//獲取隨機(jī)數(shù)?????????????????????var?id?=?obj[num]['id'];?//隨機(jī)id?????????????????????var?v?=?obj[num]['mobile'];?//對應(yīng)的隨機(jī)號碼?????????????????????$("#roll").html(v);?????????????????????$("#mid").val(id);?????????????????},100);?//每隔0.1秒執(zhí)行一次?????????????????stop_btn.show();?????????????????start_btn.hide();?????????????}else{?????????????????$("#roll").html('系統(tǒng)找不到數(shù)據(jù)源，請先導(dǎo)入數(shù)據(jù)。');?????????????}?????????});?????});?});

首先我們定義變量，方便后續(xù)調(diào)用。然后，當(dāng)點(diǎn)擊“開始”按鈕后，頁面向后臺data.php發(fā)送Ajax請求，這里我們使用jqeury的getJSON來完成異步請求。當(dāng)后臺返回json數(shù)據(jù)時，我們通過通過eval() 函數(shù)可以將JSON字符串轉(zhuǎn)化為對象obj，其實就是將json數(shù)據(jù)轉(zhuǎn)換為數(shù)組了。這時，我們使用setInterval做一個定時器，定時器里需要做的工作是：隨機(jī)獲取數(shù)組obj中的手機(jī)號碼信息，然后顯示在頁面上。然后每隔0.1運(yùn)行定時器，這樣就達(dá)到了滾動顯示抽獎號碼的效果。同時顯示“停止”按鈕，隱藏“開始”按鈕，這時抽獎進(jìn)行中。

接下來看“停止”動作需要做的工作。

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("

"+mobile+"

");?????????????}?????????????stop_btn.hide();?????????????start_btn.show();?????????});?????});

當(dāng)單擊“停止”按鈕，意味著抽獎結(jié)束。使用clearInterval()函數(shù)停止定時器，獲取被抽中號碼的id，然后通過$.post將選中號碼id發(fā)送給后臺data.php處理。應(yīng)為被抽中的號碼需要在數(shù)據(jù)庫中標(biāo)記。如果后臺處理成功，前端將中獎號碼追加到中獎結(jié)果中，同時隱藏“停止”按鈕，顯示“開始”按鈕，可以再次抽獎了。

注意，我們使用setInterval()和clearInterval()設(shè)置定時器和停止定時器，關(guān)于這兩個函數(shù)的使用大家可以google或百度下。

PHP

data.php需要做兩件事，一，通過連接數(shù)據(jù)庫，讀取手機(jī)號碼信息(不包好已中獎號碼)，然后通過轉(zhuǎn)換成json格式輸出給前端；二，通過接收前端請求，修改對應(yīng)的數(shù)據(jù)庫中的中獎號碼狀態(tài)，即標(biāo)識該號碼已中獎，下次將不再作為抽獎號碼。

include_once('connect.php');?//連接數(shù)據(jù)庫??$action?=?$_GET['action'];?if($action==""){?//讀取數(shù)據(jù)，返回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{?//標(biāo)識中獎號碼?????$id?=?$_POST['id'];?????$sql?=?"update?member?set?status=1?where?id=$id";?????$query?=?mysql_query($sql);?????if($query){?????????echo?'1';?????}?}

我們可以看出，數(shù)據(jù)表member中有個字段叫status，這個字段是用來標(biāo)識是否中獎。1表示已中獎，0表示未中獎。這個后臺php程序就是操作數(shù)據(jù)庫，然后返回對應(yīng)的信息給前端。

MYSQL

最后將member表結(jié)構(gòu)信息附上。

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;

關(guān)于抽獎程序，根據(jù)不同的應(yīng)用場合不同的需求，會有不同的表現(xiàn)形式。接下來我們會有文章講述如何按照不同的概率實現(xiàn)的抽獎程序，敬請關(guān)注helloweba.com。

總結(jié)

以上是生活随笔為你收集整理的php mysql 抽奖_使用jQuery+PHP+Mysql实现抽奖程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。