ホームページ > 記事 > ウェブフロントエンド > jQuery、PHP、Mysqlを使った宝くじプログラム例を詳しく解説

jQuery、PHP、Mysqlを使った宝くじプログラム例を詳しく解説

小云云オリジナル: 2018-01-12 09:58:142213ブラウズ

この記事は主にjQuery+PHP+Mysqlを使って宝くじプログラムを実装する方法を詳しく紹介していますので、興味のある方はぜひ参考にしてください。

宝くじプログラムは実生活で広く使用されており、アプリケーションシナリオの違いによりさまざまな宝くじ方法があります。この記事では、jQuery+PHP+MySQL を使用して、テレビでよく見られるような簡単な宝くじプログラムを実装する方法を例を使用して説明します。

デモを見る

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

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 、描画された番号の ID を記録するための #mid 、そして「Start」を実行する 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;

宝くじプログラムに関しては、さまざまなアプリケーションのさまざまなニーズに応じて、さまざまな表現形式が存在します。次に、さまざまな確率に基づいて宝くじ手順を実装する方法を説明する記事を予定しています。

jQuery、PHP、Mysqlを使った宝くじプログラム例を詳しく解説

関連記事