php mysql 抽奖_jQuery+PHP+Mysql实现抽奖程序
上述代碼中,我們需要一個#roll用來顯示滾動號碼,#mid是用來記錄抽中的號碼id,然后就是需要兩個按鈕分別用來“開始”和“停止”動作,最后還需要一個#result顯示抽獎結果。
CSS
我們使用簡單的css來修飾html頁面。
注意,我們默認將按鈕#stop設置為display:none,是為了一開始只顯示“開始”按鈕,點擊“開始”后,抽獎進行中,將顯示“停止”按鈕。
jQuery
我們首先要實現的是點擊“開始”按鈕,通過ajax從后臺獲取抽獎用的數據即手機號碼,然后通過定時滾動顯示手機號碼,注意每次顯示的手機號碼是隨機的,也就是說不是按照某種順序出現的,我們看下面的代碼:
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運行定時器,這樣就達到了滾動顯示抽獎號碼的效果。同時顯示“停止”按鈕,隱藏“開始”按鈕,這時抽獎進行中。
接下來看“停止”動作需要做的工作。
PHP;">
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();
});
});
當單擊“停止”按鈕,意味著抽獎結束。使用clearInterval()函數停止定時器,獲取被抽中號碼的id,然后通過$.post將選中號碼id發送給后臺data.PHP處理。應為被抽中的號碼需要在數據庫中標記。如果后臺處理成功,前端將中獎號碼追加到中獎結果中,同時隱藏“停止”按鈕,顯示“開始”按鈕,可以再次抽獎了。
注意,我們使用setInterval()和clearInterval()設置定時器和停止定時器,關于這兩個函數的使用大家可以google或百度下。
data.PHP需要做兩件事,一,通過連接數據庫,讀取手機號碼信息(不包好已中獎號碼),然后通過轉換成json格式輸出給前端;二,通過接收前端請求,修改對應的數據庫中的中獎號碼狀態,即標識該號碼已中獎,下次將不再作為抽獎號碼。
$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'],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程序就是操作數據庫,然后返回對應的信息給前端。
最后將member表結構信息附上。
sql;">
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;
關于抽獎程序,根據不同的應用場合不同的需求,會有不同的表現形式。接下來我們會有文章講述如何按照不同的概率實現的抽獎程序
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持編程之家。
總結
如果覺得編程之家網站內容還不錯,歡迎將編程之家網站推薦給程序員好友。
本圖文內容來源于網友網絡收集整理提供,作為學習參考使用,版權屬于原作者。
如您喜歡交流學習經驗,點擊鏈接加入交流1群:1065694478(已滿)交流2群:163560250
總結
以上是生活随笔為你收集整理的php mysql 抽奖_jQuery+PHP+Mysql实现抽奖程序的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: android 音乐播放器评测,谁强大还
- 下一篇: C++ Primer 第五版 部分课后题