抽獎(jiǎng)程序在實(shí)際生活中廣泛運(yùn)用，由于應(yīng)用場景不同抽獎(jiǎng)的方式也是多種多樣的。本文將采用實(shí)例講解如何利用jQuery+PHP+MySQL實(shí)現(xiàn)類似電視中常見的一個(gè)簡單的抽獎(jiǎng)程序。

查看演示

本例中的抽獎(jiǎng)程序要實(shí)現(xiàn)從海量手機(jī)號(hào)碼中一次隨機(jī)抽取一個(gè)號(hào)碼作為中獎(jiǎng)號(hào)碼，可以多次抽獎(jiǎng)，被抽中的號(hào)碼將不會(huì)被再次抽中。抽獎(jiǎng)流程：點(diǎn)擊“開始”按鈕后，程序獲取號(hào)碼信息，滾動(dòng)顯示號(hào)碼，當(dāng)點(diǎn)擊“停止”按鈕后，號(hào)碼停止?jié)L動(dòng)，這時(shí)顯示的號(hào)碼即為中獎(jiǎng)號(hào)碼，可以點(diǎn)擊“開始”按鈕繼續(xù)抽獎(jiǎng)。

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> 

上述代碼中，我們需要一個(gè)#roll用來顯示滾動(dòng)號(hào)碼，#mid是用來記錄抽中的號(hào)碼id，然后就是需要兩個(gè)按鈕分別用來“開始”和“停止”動(dòng)作，最后還需要一個(gè)#result顯示抽獎(jiǎng)結(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)擊“開始”后，抽獎(jiǎng)進(jìn)行中，將顯示“停止”按鈕。

jQuery

我們首先要實(shí)現(xiàn)的是點(diǎn)擊“開始”按鈕，通過ajax從后臺(tái)獲取抽獎(jiǎng)用的數(shù)據(jù)即手機(jī)號(hào)碼，然后通過定時(shí)滾動(dòng)顯示手機(jī)號(hào)碼，注意每次顯示的手機(jī)號(hào)碼是隨機(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)化為對(duì)象 
    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']; //對(duì)應(yīng)的隨機(jī)號(hào)碼 
     $("#roll").html(v); 
     $("#mid").val(id); 
    },100); //每隔0.1秒執(zhí)行一次 
    stop_btn.show(); 
    start_btn.hide(); 
   }else{ 
    $("#roll").html('系統(tǒng)找不到數(shù)據(jù)源，請(qǐng)先導(dǎo)入數(shù)據(jù)。'); 
   } 
  }); 
 }); 
}); 

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

接下來看“停止”動(dòng)作需要做的工作。

 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(); 
  }); 
 }); 

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

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

PHP

data.php需要做兩件事，一，通過連接數(shù)據(jù)庫，讀取手機(jī)號(hào)碼信息（不包好已中獎(jiǎng)號(hào)碼），然后通過轉(zhuǎn)換成json格式輸出給前端；二，通過接收前端請(qǐng)求，修改對(duì)應(yīng)的數(shù)據(jù)庫中的中獎(jiǎng)號(hào)碼狀態(tài)，即標(biāo)識(shí)該號(hào)碼已中獎(jiǎng)，下次將不再作為抽獎(jiǎng)號(hà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)識(shí)中獎(jiǎng)號(hào)碼 
 $id = $_POST['id']; 
 $sql = "update member set status=1 where id=$id"; 
 $query = mysql_query($sql); 
 if($query){ 
  echo '1'; 
 } 
} 

我們可以看出，數(shù)據(jù)表member中有個(gè)字段叫status，這個(gè)字段是用來標(biāo)識(shí)是否中獎(jiǎng)。1表示已中獎(jiǎng)，0表示未中獎(jiǎng)。這個(gè)后臺(tái)php程序就是操作數(shù)據(jù)庫，然后返回對(duì)應(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)于抽獎(jiǎng)程序，根據(jù)不同的應(yīng)用場合不同的需求，會(huì)有不同的表現(xiàn)形式。接下來我們會(huì)有文章講述如何按照不同的概率實(shí)現(xiàn)的抽獎(jiǎng)程序

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論