jQuery+h5 realizes the nine-square lottery special effect (front-end and back-end code)

Preface:

Front-end: jq+h5 to achieve the nine-grid dynamic effect

Backend: thinkphp3.2.3 implements the winning probability algorithm

Function: Support reading the winning rate and prize pool preset in the database. The winning rate can be customized and must be an integer

The final effect is as follows:

Code:

The code of choujiang.html is as follows:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Wudang Mountain Taoist" />
<title>Nine-grid lucky draw turntable</title>
<style type="text/css">
.container{width:100%;height:auto;line-height: 100%;text-align: center;}
#lottery{width:425px;height:425px;margin:auto;background:#e5e5e5;}
#lottery table td{width:142px;height:142px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999;
 
}
/*#lottery table td a{width:284px;height:284px;line-height:150px;display:block;text-decoration:none;}*/
#lottery table td.active{background-color:#fff333;border-radius: 10px;}

#start {color:white;background:orange;
 border-radius: 10px;
 height:130px;
 line-height: 130px;
 width:130px;
 margin: auto;
 /*margin: 10% 10% 10% 10%;*/
 text-align: center;
 display: block;
 text-decoration: none;
}
#con_prize{display: none;margin-top: 10px;}
#pname{color:red;margin-left: 5px;margin-right: 10px;font-size: 20px;}
.prize{background:#000 ;opacity: 0.5;
 height:130px;width: 130px;
 border-radius: 5px;margin: auto;line-height: 130px;
 text-shadow: 1px 1px 2px;
}
.on{opacity: 1;color:#fff;background: #a5a5d1}
</style>
</head>
<body>
<div class="container">
 <div id="lottery">
     <table border="0" cellpadding="0" cellspacing="0" style="background:#e3f4a1">
         <tr>
             <td class="lottery-unit lottery-unit-0"><div class="prize prize-0">Consolation Prize</div></td>
             <td class="lottery-unit lottery-unit-1"><div class="prize prize-1">Toy car</div></td>
             <td class="lottery-unit lottery-unit-2"><div class="prize prize-2">Bicycle</div></td>
         </tr>
         <tr>
             <td class="lottery-unit lottery-unit-7"><div class="prize prize-7">Audi</div></td>
             <td ><a href="#" rel="external nofollow" class = "lottery-unit" id="start">Start the lottery</a></td>
             <td class="lottery-unit lottery-unit-3"><div class="prize prize-3">Electric Vehicle</div></td>
         </tr>
         <tr>
             <td class="lottery-unit lottery-unit-6"><div class="prize prize-6">Xia Li</div></td>
             <td class="lottery-unit lottery-unit-5"><div class="prize prize-5">Tractor</div></td>
             <td class="lottery-unit lottery-unit-4"><div class="prize prize-4">Motorcycle</div></td>
         </tr>
     </table>
 </div>
 <div id="con_prize" data-pname="Changyi Taisheng 100 yuan coupon" data-pid="1">Congratulations on winning the prize: <span id="pname"></span><button onclick="getPrize()">Get the prize</button></div>
</div>

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


        var lottery = {
                index:-1, //Current rotation position, starting position count:8, //How many prize positions are there in total? A 9-square grid means 8 prize positions timer:0, //setTimeout ID, clear with clearTimeout speed:10, //Initial rotation speed times:0, //Number of rotations cycle:50, //Basic rotation times: how many times you need to rotate at least before entering the lottery prize:0, //Default winning position, put the default prize init:function(id){
                        if ($("#"+id).find(".lottery-unit").length>0) {
                                $lottery = $("#"+id);
                                $units = $lottery.find(".lottery-unit");
                                this.obj = $lottery;
                                this.count = $units.length;
                                $lottery.find(".prize-"+this.index).addClass("on");
                        };
                },
                roll:function(){
                        var index = this.index;
                        var count = this.count;
                        var lottery = this.obj;
                        $(lottery).find(".prize-"+index).removeClass("on");
                        index += 1;
                        if (index>count-1) {
                            index = 0;
                        };
                        $(lottery).find(".prize-"+index).addClass("on");
                        this.index=index;
                        return false;
                    },
               stop:function(index){
                        this.prize=index;
                        return false;
                    }
        };

        //Store prize information var prize_data = {
         pname:'Default Prize', //Prize name pnum:0, //Winning position defaults to 0, important, the turntable uses this to locate the winning product pid:1, //Prize ID defaults to 1
        };

        
        function roll(){
            lottery.times += 1;
            lottery.roll();
            
            if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
                clearTimeout(lottery.timer);
                lottery.times=0;
                click=false;
                //Show winning informationshowDetail();
            }else{
             //Speed control if (lottery.times<lottery.cycle) {
                    lottery.speed -= 10;
                }else if(lottery.times==lottery.cycle) {
                    index = lottery.prize;     
                }else{
                    if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
                        lottery.speed += 110;
                    }else{
                        lottery.speed += 20;
                    }
                }
                if (lottery.speed<40) {
                    lottery.speed=40;
                };
                //Delayed recursive call lottery.timer = setTimeout(roll,lottery.speed);
                
            }
            
            return false;
        }
        /*
   * Get the winning position * @param {string} name User nickname (required)
   * @param {string} avatar WeChat avatar URL (required)
   * @param {string} openid WeChat openid (required, used to verify uniqueness, a user can only draw once)
   * @return {bool} 
   */
  function doRoll(url,name,avatar,openid){
   $.ajax({ url: url, data:{name:name,avatar:avatar,openid:openid}, async:false,dataType:'json',success: function(rst){
    lottery.speed=100;
          var data = rst.data;
          
          lottery.prize = data.pnum;
          prize_data = {
                  pname:data.pname,
                  pnum:data.pnum,
                  pid:data.pid
                 };
                roll();
                click=true;
                return false;

        }});
  }

        //Receive the prize (jump to the delivery address page, or pop up the delivery address page)
        function getPrize(){
         alert("Please fill in the delivery address");
        }
        // Clear the winning information function clearDetail(){
         $("#con_prize").hide();
            $("#pname").html("");
        }
        //Display winning information function showDetail(){
         $("#con_prize").show();
            $("#pname").html(prize_data.pname);
        }

        var click=false;

        window.function(){
         var url = 'http://test.com/api/Shop/ex/'; //Change to the actual background lottery interface here lottery.init('lottery');
            $("#start").click(function(){
                if (click) {
                    return false;
                }else{
                 clearDetail();
                 doRoll(url,"name","avatar","openid");
                }
            });
        };

</script>
</body>
</html>

The thinkphp interface code is as follows:

namespace Api\Controller;
use Think\Controller;
class ShopController Extends Controller {
 /**
     * Lottery backend interface* @author Wudang Mountain Taoist*/
    
     public function ex(){
        $nick = I('nick','','trim');
        $avatar = I('avatar','','trim');
        $openid = I('openid','','trim');
        //if(empty($nick)) $this->error('empty nick');
        //if(empty($avatar)) $this->error('empty avatar');
        //if(empty($openid)) $this->error('empty openid');
        /*The error function you encapsulate yourself should normally be written like this:
        $this->ajaxReturn(array(
          'data'=>'',
          'info'=>$info,
          'status'=>$status
         ));*/
         
        //Initialize the prize pool, 8 prizes, full probability 100, minimum probability 1 (id, name is based on the data retrieved from the actual database, and the sum of percent is equal to 100)
        $arr8 = array(
            array("id"=>1,"name"=>"Consolation Prize","percent"=>69),
            array("id"=>2,"name"=>"Toy car","percent"=>10),
            array("id"=>3,"name"=>"bicycle","percent"=>6),
            array("id"=>4,"name"=>"electric vehicle","percent"=>5),
            array("id"=>5,"name"=>"Motorcycle","percent"=>4),
            array("id"=>6,"name"=>"tractor","percent"=>3),
            array("id"=>7,"name"=>"Xia Li","percent"=>2),
            array("id"=>8,"name"=>"Audi","percent"=>1),
            );
        //100 subscript storage arrays, 0-7 are assigned corresponding quantities according to probability $indexArr = array();
        for($i=0;$i<sizeof($arr8);$i++){
            for($j=0;$j<$arr8[$i]['percent'];$j++){
                //index appended to array indexArr
                array_push($indexArr, $i);
            }
        }
        //Array shuffle($indexArr);
        //Randomly pick a subscript from the subscript array as the winning subscript, $rand_index is the subscript of the random element of $indexArr (0-99)
        $rand_index = array_rand($indexArr,1);
        //Get the winning information$prize_index = $indexArr[$rand_index];
        $prizeInfo = $arr8[$prize_index];

        
        $data['pnum'] = $prize_index; //Corresponding front-end prize number $data['pid'] = $prizeInfo['id'];
        $data['pname'] = $prizeInfo['name'];
        $this->success($data);/*Self-encapsulated success, normally it should be written like this $this->ajaxReturn(array(
          'data'=>$data,
          'info'=>'Success',
          'status'=>1
         ));*/
    }
    
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: