ホームページ > 記事 > バックエンド開発 > php、jQuery、Mysqlを使用した宝くじプログラムの実装例

php、jQuery、Mysqlを使用した宝くじプログラムの実装例

黄舟オリジナル: 2017-11-15 15:16:092082ブラウズ

前回の記事では、PHP で宝くじプログラムを実装するための当選確率アルゴリズムを紹介しました。私たちの仕事でも宝くじプログラムによく遭遇します。そこで、今日は PHP、jQuery を使用して宝くじプログラムを実装する方法を紹介します。そしてMysqlの例！

この例の宝くじプログラムは、多数の携帯電話番号からランダムに 1 つの番号を当選番号として選択するもので、複数回抽選することができ、一度抽選された番号は再度抽選されることはありません。抽選処理：「スタート」ボタンをクリックすると、プログラムが数字情報を取得し、数字をスクロール表示します。「ストップ」ボタンをクリックすると、その時点で表示されている数字が当選番号となります。「スタート」ボタンをクリックして抽選を続けてください。

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 、描画された番号の ID を記録する #mid 、そしてそれぞれ「開始」と「停止」の 2 つのボタンが必要です。 . "アクション、そして最後に、抽選結果を表示するには #result が必要です。

CSS

HTMLページを装飾するために簡単なCSSを使用します。

.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 を取得し、選択した数字の ID をバックグラウンドの data.php に送信して、$.post を通じて処理します。描画される数字はデータベースにマークされている必要があります。バックグラウンド処理が成功すると、フロントエンドが当選結果に当選番号を加算し、「ストップ」ボタンを非表示にして「スタート」ボタンを表示し、再度抽選が可能となります。

タイマーの設定と停止には setInterval() と clearInterval() を使用することに注意してください。これら 2 つの関数の使用方法については、Google または Baidu で検索できます。

PHP

data.phpは、まず

を介してデータベースに接続し、携帯電話番号情報(当選番号は含まない)を読み取り、それを変換してフロントエンドに出力する必要があります。 json 形式に変換する; 2 番目、フロントエンドリクエストを受信すると、対応するデータベース内の当選番号のステータスが変更されます。これは、その番号が当選し、次回の宝くじ番号として使用されなくなることを意味します。

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

データテーブルメンバーに status というフィールドがあることがわかります。このフィールドは賞品を獲得したかどうかを識別するために使用されます。 1 は賞を獲得したことを意味し、0 は賞を獲得していないことを意味します。このバックグラウンド php プログラムはデータベースを操作し、対応する情報をフロントエンドに返します。

MYSQL

最後に、メンバーテーブルの構造情報を添付します。

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;

概要: この記事では、例を通して、php、jQuery、Mysql を使用した宝くじプログラムの実装について詳しく説明します。宝くじプログラムに関しては、さまざまなニーズに応じてさまざまな形式が存在します。アプリケーション。

php、jQuery、Mysqlを使用した宝くじプログラムの実装例

関連記事