jQuery+PHP+Mysql實現(xiàn)抽獎程序
抽獎程序在實際生活中廣泛運用,由于應(yīng)用場景不同抽獎的方式也是多種多樣的。本文將采用實例講解如何利用jQuery+PHP+MySQL實現(xiàn)類似電視中常見的一個簡單的抽獎程序。
查看演示
本例中的抽獎程序要實現(xiàn)從海量手機號碼中一次隨機抽取一個號碼作為中獎號碼,可以多次抽獎,被抽中的號碼將不會被再次抽中。抽獎流程:點擊“開始”按鈕后,程序獲取號碼信息,滾動顯示號碼,當點擊“停止”按鈕后,號碼停止?jié)L動,這時顯示的號碼即為中獎號碼,可以點擊“開始”按鈕繼續(xù)抽獎。
HTML
<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顯示抽獎結(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}
注意,我們默認將按鈕#stop設(shè)置為display:none,是為了一開始只顯示“開始”按鈕,點擊“開始”后,抽獎進行中,將顯示“停止”按鈕。
jQuery
我們首先要實現(xiàn)的是點擊“開始”按鈕,通過ajax從后臺獲取抽獎用的數(shù)據(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);//獲取隨機數(shù) var id = obj[num]['id']; //隨機id var v = obj[num]['mobile']; //對應(yīng)的隨機號碼 $("#roll").html(v); $("#mid").val(id); },100); //每隔0.1秒執(zhí)行一次 stop_btn.show(); start_btn.hide(); }else{ $("#roll").html('系統(tǒng)找不到數(shù)據(jù)源,請先導入數(shù)據(jù)。'); } }); }); });
首先我們定義變量,方便后續(xù)調(diào)用。然后,當點擊“開始”按鈕后,頁面向后臺data.php發(fā)送Ajax請求,這里我們使用jqeury的getJSON來完成異步請求。當后臺返回json數(shù)據(jù)時,我們通過通過eval() 函數(shù)可以將JSON字符串轉(zhuǎn)化為對象obj,其實就是將json數(shù)據(jù)轉(zhuǎn)換為數(shù)組了。這時,我們使用setInterval做一個定時器,定時器里需要做的工作是:隨機獲取數(shù)組obj中的手機號碼信息,然后顯示在頁面上。然后每隔0.1運行定時器,這樣就達到了滾動顯示抽獎號碼的效果。同時顯示“停止”按鈕,隱藏“開始”按鈕,這時抽獎進行中。
接下來看“停止”動作需要做的工作。
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(); }); });
當單擊“停止”按鈕,意味著抽獎結(jié)束。使用clearInterval()函數(shù)停止定時器,獲取被抽中號碼的id,然后通過$.post將選中號碼id發(fā)送給后臺data.php處理。應(yīng)為被抽中的號碼需要在數(shù)據(jù)庫中標記。如果后臺處理成功,前端將中獎號碼追加到中獎結(jié)果中,同時隱藏“停止”按鈕,顯示“開始”按鈕,可以再次抽獎了。
注意,我們使用setInterval()和clearInterval()設(shè)置定時器和停止定時器,關(guān)于這兩個函數(shù)的使用大家可以google或百度下。
PHP
data.php需要做兩件事,一,通過連接數(shù)據(jù)庫,讀取手機號碼信息(不包好已中獎號碼),然后通過轉(zhuǎn)換成json格式輸出給前端;二,通過接收前端請求,修改對應(yīng)的數(shù)據(jù)庫中的中獎號碼狀態(tài),即標識該號碼已中獎,下次將不再作為抽獎號碼。
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{ //標識中獎號碼 $id = $_POST['id']; $sql = "update member set status=1 where id=$id"; $query = mysql_query($sql); if($query){ echo '1'; } }
我們可以看出,數(shù)據(jù)表member中有個字段叫status,這個字段是用來標識是否中獎。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)的抽獎程序
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- jQuery實現(xiàn)類似老虎機滾動抽獎效果
- Android UI 實現(xiàn)老虎機詳解及實例代碼
- jquery 年會抽獎程序
- jQuery實現(xiàn)轉(zhuǎn)動隨機數(shù)抽獎效果的方法
- jquery實現(xiàn)九宮格大轉(zhuǎn)盤抽獎
- jquery——九宮格大轉(zhuǎn)盤抽獎實例
- jQuery+PHP實現(xiàn)的擲色子抽獎游戲?qū)嵗?/a>
- 基于jQuery實現(xiàn)的雙11天貓拆紅包抽獎效果
- jQuery+PHP實現(xiàn)微信轉(zhuǎn)盤抽獎功能的方法
- jquery轉(zhuǎn)盤抽獎功能實現(xiàn)
- jQuery實現(xiàn)的老虎機跑動效果示例
相關(guān)文章
jQuery插件WebUploader實現(xiàn)文件上傳
這篇文章主要為大家詳細介紹了jQuery插件WebUploader實現(xiàn)文件上傳,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11jQuery實現(xiàn)每隔一段時間自動更換樣式的方法分析
這篇文章主要介紹了jQuery實現(xiàn)每隔一段時間自動更換樣式的方法,結(jié)合實例形式較為詳細的分析了jQuery結(jié)合時間函數(shù)動態(tài)修改頁面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-05-05EasyUI中datagrid在ie下reload失敗解決方案
這篇文章主要介紹了EasyUI中datagrid在ie下reload失敗解決方案,結(jié)合網(wǎng)上搜集來的幾種方案,最終解決了這個問題,分享給大家,希望對大家能夠有所幫助。2015-03-03jQuery通過控制節(jié)點實現(xiàn)僅在前臺通過get方法完成參數(shù)傳遞
這篇文章主要介紹了jQuery通過控制節(jié)點實現(xiàn)僅在前臺通過get方法完成參數(shù)傳遞的功能,實例分析了jQuery操作節(jié)點的技巧與控制前臺get方法傳遞參數(shù)的用法,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02