jQuery+h5 で 9 マス抽選特殊効果を実現 (フロントエンドとバックエンドのコード)

序文：

フロントエンド: jq+h5 で 9 グリッドのダイナミック効果を実現

バックエンド: thinkphp3.2.3 は勝利確率アルゴリズムを実装します

機能: データベースにプリセットされた勝率と賞金プールの読み取りをサポートします。勝率はカスタマイズ可能で、整数である必要があります。

最終的な効果は次のようになります。

コード：

choujiang.html のコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<meta name="author" content="武当山道士" />
<title>9グリッドラッキードローターンテーブル</title>
<スタイル タイプ="text/css">
.container{幅:100%;高さ:自動;行の高さ:100%;テキスト配置:中央;}
#宝くじ{幅:425px;高さ:425px;余白:自動;背景:#e5e5e5;}
#宝くじ表 td{width:142px;height:142px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999;
 
}
/*#宝くじ表 td a{幅:284px;高さ:284px;行の高さ:150px;表示:ブロック;テキスト装飾:なし;}*/
#宝くじテーブル td.active{background-color:#fff333;border-radius: 10px;}

#start {色:白;背景:オレンジ;
 境界線の半径: 10px;
 高さ:130px;
 行の高さ: 130px;
 幅:130ピクセル;
 マージン: 自動;
 /*マージン: 10% 10% 10% 10%;*/
 テキスト配置: 中央;
 表示: ブロック;
 テキスト装飾: なし;
}
#con_prize{表示: なし; 上マージン: 10px;}
#pname{色:赤;左余白: 5px;右余白: 10px;フォントサイズ: 20px;}
.prize{背景:#000;不透明度: 0.5;
 高さ:130px;幅:130px;
 境界線の半径: 5px;余白: 自動;行の高さ: 130px;
 テキストシャドウ: 1px 1px 2px;
}
.on{不透明度: 1;色:#fff;背景: #a5a5d1}
</スタイル>
</head>
<本文>
<div class="コンテナ">
 <div id="宝くじ">
     <表の境界線="0" セルのパディング="0" セルの間隔="0" スタイル="背景:#e3f4a1">
         <tr>
             <td class="lottery-unit lottery-unit-0"><div class="prize Prize-0">残念賞</div></td>
             <td class="lottery-unit lottery-unit-1"><div class="prize Prize-1">おもちゃの車</div></td>
             <td class="lottery-unit lottery-unit-2"><div class="prize Prize-2">自転車</div></td>
         </tr>
         <tr>
             <td class="lottery-unit lottery-unit-7"><div class="prize Prize-7">アウディ</div></td>
             <td><a href="#" rel="external nofollow" class = "lottery-unit" id="start">抽選を開始する</a></td>
             <td class="lottery-unit lottery-unit-3"><div class="prize Prize-3">電気自動車</div></td>
         </tr>
         <tr>
             <td class="lottery-unit lottery-unit-6"><div class="prize Prize-6">夏 李</div></td>
             <td class="lottery-unit lottery-unit-5"><div class="prize Prize-5">トラクター</div></td>
             <td class="lottery-unit lottery-unit-4"><div class="prize Prize-4">オートバイ</div></td>
         </tr>
     </テーブル>
 </div>
 <div id="con_prize" data-pname="Changyi Taisheng 100 元クーポン" data-pid="1">賞品獲得おめでとうございます: <span id="pname"></span><button onclick="getPrize()">賞品を獲得</button></div>
</div>

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">


        var 宝くじ = {
                index:-1, //現在の回転位置、開始位置 count:8, //賞品位置は全部でいくつありますか? 9マスのグリッドは8つの賞品位置を意味します timer:0, //setTimeout ID、clearTimeoutでクリア speed:10, //初期回転速度 times:0, //回転数 cycle:50, //基本回転回数: 抽選に入る前に少なくとも何回回転する必要があるか Prize:0, //デフォルトの当選位置、デフォルトの賞品を配置 init:function(id){
                        ($("#"+id).find(".lottery-unit").length>0) の場合 {
                                $lottery = $("#"+id);
                                $units = $lottery.find(".lottery-unit");
                                this.obj = $lottery;
                                長さは単位の数で決まります。
                                $lottery.find(".prize-"+this.index).addClass("on");
                        };
                },
                ロール:関数(){
                        var インデックス = this.index;
                        var count = this.count;
                        var 宝くじ = this.obj;
                        $(lottery).find(".prize-"+index).removeClass("on");
                        インデックス += 1;
                        if (インデックス>カウント-1) {
                            インデックス = 0;
                        };
                        $(lottery).find(".prize-"+index).addClass("on");
                        this.index=インデックス;
                        false を返します。
                    },
               停止:関数(インデックス){
                        this.prize=インデックス;
                        false を返します。
                    }
        };

        //賞品情報を保存する var Prize_data = {
         pname:'Default Prize', // 賞品名 pnum:0, // 当選位置のデフォルトは 0 です。重要、ターンテーブルはこれを使用して当選商品を見つけます pid:1, // 賞品 ID のデフォルトは 1 です
        };

        
        関数ロール(){
            抽選回数 += 1;
            抽選.roll();
            
            （lottery.times > lottery.cycle+10 && lottery.prize==lottery.index）の場合{
                宝くじのタイマーのタイムアウトをクリアします。
                抽選回数=0;
                クリック=false;
                // 勝利情報を表示showDetail();
            }それ以外{
             //速度制御 if (lottery.times<lottery.cycle) {
                    宝くじの速度 -= 10;
                }そうでない場合(lottery.times==lottery.cycle) {
                    インデックス = lottery.prize;     
                }それ以外{
                    （lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)）の場合{
                        宝くじの速度 += 110;
                    }それ以外{
                        宝くじの速度 += 20;
                    }
                }
                宝くじの速度が40未満の場合
                    宝くじの速度=40;
                };
                //遅延再帰呼び出し lottery.timer = setTimeout(roll,lottery.speed);
                
            }
            
            false を返します。
        }
        /*
   * 勝利ポジションを取得 * @param {string} name ユーザーのニックネーム（必須）
   * @param {string} avatar WeChatアバターURL（必須）
   * @param {string} openid WeChat openid (必須、一意性を検証するために使用、ユーザーは1回しか描画できません)
   * @return {ブール値} 
   */
  関数doRoll(url,name,avatar,openid){
   $.ajax({ url: url, data:{name:name,avatar:avatar,openid:openid}, async:false,dataType:'json',success: function(rst){
    宝くじの速度=100;
          var データ = rst.data;
          
          lottery.prize = data.pnum;
          賞品データ = {
                  pname:データ.pname、
                  pnum:データ.pnum、
                  pid:データ.pid
                 };
                ロール（）;
                クリック=true;
                false を返します。

        }});
  }

        //賞品を受け取る（配送先住所ページにジャンプ、または配送先住所ページをポップアップ表示）
        関数 getPrize(){
         alert("配送先住所を入力してください");
        }
        // 勝利情報をクリアする function clearDetail(){
         $("#con_prize").hide();
            $("#pname").html("");
        }
        // 勝利情報を表示する function showDetail(){
         $("#con_prize").show();
            $("#pname").html(賞品データ.pname);
        }

        var クリック = false;

        ウィンドウ関数(){
         var url = 'http://test.com/api/Shop/ex/'; //ここで実際のバックグラウンド宝くじインターフェースに変更します lottery.init('lottery');
            $("#start").click(function(){
                （クリック）{
                    false を返します。
                }それ以外{
                 詳細をクリアします();
                 doRoll(url、名前、アバター、openid)
                }
            });
        };

</スクリプト>
</本文>
</html>

thinkphp インターフェースコードは次のとおりです。

名前空間 Api\Controller;
Think\Controller を使用します。
クラス ShopController は Controller を拡張します {
 /**
     * 宝くじバックエンドインターフェース* @author 武当山道教*/
    
     パブリック関数 ex(){
        $nick = I('nick','','trim');
        $アバター = I('アバター','','トリム');
        $openid = I('openid','','トリム');
        //if(empty($nick)) $this->error('ニックネームが空です');
        //if(empty($avatar)) $this->error('アバターが空です');
        //if(empty($openid)) $this->error('openidが空です');
        /* 自分でカプセル化するエラー関数は通常、次のように記述します。
        $this->ajaxReturn(配列(
          'データ'=>''、
          '情報'=>$情報、
          'ステータス'=>$ステータス
         ));*/
         
        // 賞金プールを初期化します。賞金は 8 個、全確率は 100、最小確率は 1 です (ID、名前は実際のデータベースから取得したデータに基づいており、パーセントの合計は 100 になります)
        $arr8 = 配列(
            array("id"=>1,"name"=>"慰め賞","percent"=>69),
            配列("id"=>2,"name"=>"おもちゃの車","パーセント"=>10),
            配列("id"=>3,"名前"=>"自転車","パーセント"=>6),
            配列("id"=>4,"name"=>"電気自動車","パーセント"=>5),
            配列("id"=>5,"name"=>"オートバイ","パーセント"=>4),
            配列("id"=>6,"name"=>"トラクター","パーセント"=>3),
            配列("id"=>7,"name"=>"夏李","パーセント"=>2),
            配列("id"=>8、"名前"=>"Audi"、"パーセント"=>1)、
            );
        // 100 個の添字格納配列。0 ～ 7 には確率に応じて対応する量が割り当てられます。$indexArr = array();
        ($i=0;$i<sizeof($arr8);$i++){
            ($j=0;$j<$arr8[$i]['パーセント'];$j++){
                // 配列 indexArr に追加されたインデックス
                array_push($indexArr, $i);
            }
        }
        //配列シャッフル($indexArr);
        // 添え字配列から添え字をランダムに選択して、勝利添え字とします。$rand_index は、$indexArr のランダム要素の添え字です (0-99)
        $rand_index = array_rand($indexArr,1);
        // 当選情報を取得します$prize_index = $indexArr[$rand_index];
        $prizeInfo = $arr8[$prize_index];

        
        $data['pnum'] = $prize_index; //対応するフロントエンド賞品番号 $data['pid'] = $prizeInfo['id'];
        $data['pname'] = $prizeInfo['name'];
        $this->success($data);/*自己カプセル化された成功。通常は次のように記述します。$this->ajaxReturn(array(
          'データ'=>$データ、
          'info'=>'成功',
          'ステータス'=>1
         ));*/
    }
    
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: