使用jQuery+PHP+Mysql實現抽獎程序

時間 2019-12-17

標籤使用 jquery+php+mysql jquery php mysql 實現抽獎程序欄目 JQuery 简体版

原文原文鏈接

抽獎程序在實際生活中普遍運用，因爲應用場景不一樣抽獎的方式也是多種多樣的。本文將採用實例講解如何利用jQuery+PHP+Mysql實現相似電視中常見的一個簡單的抽獎程序。php

本例中的抽獎程序要實現從海量手機號碼中一次隨機抽取一個號碼做爲中獎號碼，能夠屢次抽獎，被抽中的號碼將不會被再次抽中。抽獎流程：點擊「開始」按鈕後，程序獲取號碼信息，滾動顯示號碼，當點擊「中止」按鈕後，號碼中止滾動，這時顯示的號碼即爲中獎號碼，能夠點擊「開始」按鈕繼續抽獎。css

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顯示抽獎結果。html

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，是爲了一開始只顯示「開始」按鈕，點擊「開始」後，抽獎進行中，將顯示「中止」按鈕。mysql

jQuery

咱們首先要實現的是點擊「開始」按鈕，經過ajax從後臺獲取抽獎用的數據即手機號碼，而後經過定時滾動顯示手機號碼，注意每次顯示的手機號碼是隨機的，也就是說不是按照某種順序出現的，咱們看下面的代碼：web

$(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字符串轉化爲對象 
                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運行定時器，這樣就達到了滾動顯示抽獎號碼的效果。同時顯示「中止」按鈕，隱藏「開始」按鈕，這時抽獎進行中。ajax

接下來看「中止」動做須要作的工做。sql

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或百度下。json

PHP

data.php須要作兩件事，一，經過鏈接數據庫，讀取手機號碼信息（不包好已中獎號碼），而後經過轉換成json格式輸出給前端；二，經過接收前端請求，修改對應的數據庫中的中獎號碼狀態，即標識該號碼已中獎，下次將再也不做爲抽獎號碼。

include_once('connect.php'); //鏈接數據庫 
 
$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'],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'; 
    } 
}

咱們能夠看出，數據表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 '0', 
  PRIMARY KEY  (`id`) 
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;