首頁 >web前端 >js教程 >jQuery、PHP、Mysql實作抽獎程式實例詳解

jQuery、PHP、Mysql實作抽獎程式實例詳解

小云云原創: 2018-01-12 09:58:142286瀏覽

本文主要為大家詳細介紹了jQuery+PHP+Mysql實現抽獎程序，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助到大家。

抽獎程式在實際生活中廣泛運用，由於應用場景不同抽獎的方式也是多種多樣的。本文將採用實例來講解如何利用jQuery+PHP+MySQL實作類似電視中常見的一個簡單的抽獎程式。

查看示範

#本例中的抽獎程式要實現從海量手機號碼一次隨機抽出一個號碼作為中獎號碼，可以多次抽獎，被抽中的號碼將不會再次被抽中。抽獎流程：點選「開始」按鈕後，程式取得號碼訊息，捲動顯示號碼，當點擊「停止」按鈕後，號碼停止捲動，這時顯示的號碼即為中獎號碼，可以點選「開始」按鈕繼續抽獎。

HTML

<p id="roll"></p><input type="hidden" id="mid" value=""> 
<p><input type="button" class="btn" id="start" value="开始"> 
<input type="button" class="btn" id="stop" value="停止"></p> 
<p id="result"></p>

在上述程式碼中，我們需要一個#roll用來顯示捲動號碼，#mid是用來記錄抽中的號碼id，然後就是需要兩個按鈕分別用來「開始」和「停止」動作，最後還需要一個#result顯示抽獎結果。

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設定為display:none，是為了一開始只顯示「開始」按鈕，點擊「開始」後，抽獎進行中，將顯示“停止”按鈕。

jQuery

我們首先要實現的是點擊「開始」按鈕，透過ajax從後台取得抽獎用的資料即手機號碼，然後透過定時滾動顯示手機號碼，注意每次顯示的手機號碼是隨機的，也就是說不是按照某種順序出現的，我們看下面的代碼：

$(function(){ 
  var _gogo; 
  var start_btn = $("#start"); 
  var stop_btn = $("#stop"); 
   
  start_btn.click(function(){ 
    $.getJSON(&#39;data.php&#39;,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][&#39;id&#39;]; //随机id 
          var v = obj[num][&#39;mobile&#39;]; //对应的随机号码 
          $("#roll").html(v); 
          $("#mid").val(id); 
        },100); //每隔0.1秒执行一次 
        stop_btn.show(); 
        start_btn.hide(); 
      }else{ 
        $("#roll").html(&#39;系统找不到数据源，请先导入数据。&#39;); 
      } 
    }); 
  }); 
});

首先我們定義變數，方便後續調用。然後，當點擊「開始」按鈕後，頁面向後台data.php發送Ajax請求，這裡我們使用jqeury的getJSON來完成非同步請求。當後台回傳json資料時，我們透過eval() 函數可以將JSON字串轉換為物件obj，其實就是將json資料轉換為陣列了。這時，我們使用setInterval做一個定時器，定時器裡需要做的工作是：隨機獲取數組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(); 
    }); 
  });

當點擊「停止」按鈕，表示抽獎結束。使用clearInterval()函數停止定時器，取得被抽中號碼的id，然後透過$.post將選取號碼id傳送給後台data.php處理。應為被抽中的號碼需要在資料庫中標記。如果後台處理成功，前端將中獎號碼追加到中獎結果中，同時隱藏「停止」按鈕，顯示「開始」按鈕，可以再次抽獎了。

注意，我們使用setInterval()和clearInterval()來設定計時器和停止計時器，關於這兩個函數的使用大家可以google或百度下。

PHP

data.php需要做兩件事，一，透過連接資料庫，讀取手機號碼資訊（不包好已中獎號碼），然後透過轉換成json格式輸出給前端；二，透過接收前端請求，修改對應的資料庫中的中獎號碼狀態，即標識該號碼已中獎，下次將不再作為抽獎號碼。

include_once(&#39;connect.php&#39;); //连接数据库 
 
$action = $_GET[&#39;action&#39;]; 
if($action==""){ //读取数据，返回json 
  $query = mysql_query("select * from member where status=0"); 
    while($row=mysql_fetch_array($query)){ 
    $arr[] = array( 
      &#39;id&#39; => $row[&#39;id&#39;], 
      &#39;mobile&#39; => substr($row[&#39;mobile&#39;],0,3)."****".substr($row[&#39;mobile&#39;],-4,4) 
    ); 
  } 
  echo json_encode($arr); 
}else{ //标识中奖号码 
  $id = $_POST[&#39;id&#39;]; 
  $sql = "update member set status=1 where id=$id"; 
  $query = mysql_query($sql); 
  if($query){ 
    echo &#39;1&#39;; 
  } 
}

我們可以看出，資料表member中有個欄位叫status，這個欄位是用來識別是否中獎。 1表示已中獎，0表示未中獎。這個後台php程式就是操作資料庫，然後回傳對應的資訊給前端。

MYSQL

最後將member表結構資訊附上。

CREATE TABLE `member` ( 
 `id` int(11) NOT NULL auto_increment, 
 `mobile` varchar(20) NOT NULL, 
 `status` tinyint(1) NOT NULL default &#39;0&#39;, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

關於抽獎程序，根據不同的應用場合不同的需求，會有不同的表現形式。接下來我們會有文章講述如何按照不同的機率實現的抽獎程序。

jQuery、PHP、Mysql實作抽獎程式實例詳解

相關文章