_php example of Php+jquery the lottery function of the flip-board

The realization process of the lottery: the front page provides 6 squares, with the number 1-6 in turn to represent 6 different squares, when the lottery is clicked on a piece of 6 squares, the box flips to the back, showing the lottery winning information. Seemingly simple operation process, but contains a lot of knowledge of web technology, so the reader should be proficient in jquery and PHP related knowledge.

Html
And this site is different from the article, the flop draw does not provide the start and end lottery buttons, the lottery draw their own decision to select one of the boxes to complete the lottery, so we placed 6 squares in the page, and 1-6 to represent different squares.

<ul id= "Prize" > 
  <li class= "Red" title= "click Draw" >1</li> 
  <li class= "Green" title= "click Draw" > 2</li> 
  <li class= "Blue" title= "click Draw" >3</li> 
  <li class= "Purple" title= "click Draw" >4</ li> 
  <li class= "Olive" title= "click Draw" >5</li> 
  <li class= "Brown" title= "click Draw" >6</li> 
</ul> 
<div><a href= "#" id= "Viewother" > "Open Other" </a></div> 
<div id= " Data "></div> 

HTML structure, we use an unordered list to place 6 different squares, each Li in the Clas attribute represents the color of the box, the list below is a link a#viewother, used to complete the draw, click on it, look at the back of the other squares of the winning information, the default is hidden. Then there is a div#data, it is empty, the role is used to temporarily store the other awards data not in the draw, see the following code. In order to make 6 square side look comfortable, you also need to use CSS to beautify, specific reference demo, this article will no longer post CSS code.
PHP
We first completed the process of PHP backstage, PHP's main job is responsible for the allocation of prizes and the corresponding probability of winning, the current page click to flip a box will want the background PHP to send Ajax request, then the backstage PHP according to the probability of configuration, through the probability algorithm to give the winning results, The award information is also sent to the front-end page in JSON data format.
First look at the probability calculation function

function Get_rand ($PROARR) { 
  $result = '; 
 
  The total probability precision of probability array 
  $proSum = Array_sum ($PROARR); 
 
  Probability array Loop 
  foreach ($proArr as $key => $proCur) { 
    $randNum = Mt_rand (1, $proSum); 
    if ($randNum <= $proCur) { 
      $result = $key; 
      break; 
    else { 
      $proSum-= $proCur; 
    } 
  } 
  Unset ($PROARR); 
 
  return $result; 
} 

The above code is a classical probability algorithm, $PROARR is a pre-set array, assuming that the array is: Arrays (100,200,300,400), starting from 1,1000 this probability range to filter the first number within the range of his probability of occurrence, if not, then the probability of space , that is, the value of K minus the probability space of just that number, in this case minus 100, which means the second number is filtered in the range 1,900. In this way, there will always be a number to meet the requirements. The equivalent of going to a box to touch things, the first is not, the second is not, the third is not, the last one must be. This algorithm is simple, and very efficient, the key is that this algorithm has been used in our previous projects, especially the large amount of data in the efficiency of the project is very good.
Next we configure the awards through PHP.

$prize _arr = Array (' 
  0 ' => array (' ID ' =>1, ' prize ' => ' tablet computer ', ' V ' =>1 '), 
  ' 1 ' => array (' ID ' =>2, ' Prize ' => ' digital camera, ' V ' =>5 ', 
  ' 2 ' => array (' ID ' =>3, ' Prize ' => ' speaker equipment ', ' V ' =>10), 
  ' 3 ' => Array (' Id ' =>4, ' Prize ' => ' 4G USB drive ', ' V ' =>12 ', 
  ' 4 ' => array (' ID ' =>5, ' Prize ' => ' 10Q currency ', ' V ' =>22 '), 
  ' 5 ' => Array (' ID ' =>6, ' Prize ' => ' next time may be able to be in the Oh ', ' V ' =>50), 
); 

is a two-dimensional array, recording all the Lottery award information, where the ID indicates the winning level, prize, said the prize, V to indicate the probability of winning. Note that V must be an integer, you can set the corresponding award of V to 0, meaning that the probability of the award is 0, the sum of V in the array (radix), the larger the cardinality of the probability of accuracy. In this case the sum of V is 100, then the tablet computer corresponding to the probability of winning is 1%, if the sum of V is 10000, the probability of winning is one out of 10,000.
Each front-end page is requested, the PHP Loop awards are set array, and the probability calculation function Get_rand Gets the award ID drawn in. The winning prizes are saved in the array $res[' yes ', while the remaining outstanding information is kept in $res[' no ', and the JSON data is then output to the front page.

foreach ($prize _arr as $key => $val) { 
  $arr [$val [' id ']] = $val [' V ']; 
} 
 
$rid = Get_rand ($arr); To obtain the award ID 
 
$res [' yes '] = $prize _arr[$rid -1][' Prize '];//In the award 
unset ($prize _arr[$rid-1]);//Remove the award from the array, The remaining award 
Shuffle ($prize _arr);//scrambling array order for 
($i =0; $i <count ($prize _arr); $i + +) { 
  $PR [] = $prize _arr[$i] [' Prize ']; 
} 
$res [' no '] = $PR; 
echo Json_encode ($res); 

The direct output lottery information to have, why also want to not win the information also to output to the front page? Take a look at the front-end code at the back.
JQuery
First, in order to achieve the effect of flip-board, we need to preload flip Plug-ins and Jquery,jqueryui related plug-ins:

<script type= "Text/javascript" src= "js/jquery-1.7.2.min.js" ></script> 
<script type= "text/" JavaScript "src=" Js/jquery-ui-1.7.2.custom.min.js "></script> 
<script type=" Text/javascript "src=" Js/jquery.flip.min.js "></script> 

Next, we complete the lottery by clicking on the squares in the page.

 $ (function () {$ ("#prize Li"). each (function () {var p = $ (this); 
    var C = $ (this). attr (' class '); 
    P.css ("Background-color", c); 
      P.click (function () {$ ("#prize Li"). Unbind (' click '); $.getjson ("data.php", function (JSON) {var prize = Json.yes;//Draw award P.flip ({direction: ' RL ',/ /Flip Direction rl:right to left content:prize,//rollover after display content that is trophy color:c,//Background color onend:function () {//Flip 
            Turn over P.css ({"Font-size": "22px", "Line-height": "100px"}); P.ATTR ("id", "R"); Mark the ID of the Jackpot box $ ("#viewother"). Show (); 
          Show view other buttons $ ("#prize Li"). Unbind (' click '). CSS ("cursor", "Default"). Removeattr ("title"); 
        } 
        }); $ ("#data"). Data ("Nolist", json.no); 
    Save the Jackpot Information}); 
  }); 
}); 
}); 

In the code, we first iterate over 6 squares, initialize each square with a different background color, and click the current box to use $. Getjson to send the AJAX request back to the data.php, after the request is successful, call the Flip plug-in implementation Flip box, the winning information is displayed on the Flipped box, after the flip end, mark the Jackpot box ID, while freezing the Click event on the box, that is, unbind (' Click '), the purpose is to let the lottery draw only once, after the smoke each box can no longer flip. Finally, the outstanding award information is stored in the #data through data ().
In fact, to this step of the lottery has been completed, in order to be able to see the other side of the box what is hidden, we give a draw after the lottery can see the back of the other box links. By clicking on the link, the other 5 squares rotate, showing the back award information.

$ (function () { 
  $ ("#viewother"). Click (function () { 
    var MyData = $ ("#data"). Data ("Nolist"); 
    Mydata2 = eval (mydata);//The Eval () function converts JSON to an array of 
       
    $ ("#prize Li"). Not ($ (' #r ') [0]). Each (function (index) { 
      var PR = $ (this); 
      Pr.flip ({ 
        direction: ' BT ', 
        color: ' Lightgrey ', 
        content:mydata2[index],//prize information (not drawn) 
        OnEnd: function () { 
          pr.css ({"Font-size": "22px", "Line-height": "100px", "Color": "#333"}); 
          $ ("#viewother"). Hide (); 
    }}); $ ("#data"). Removedata ("Nolist"); 
  }); 
 

When you click #viewother, get the outstanding award data saved during the draw and convert it to an array, flip 5 squares, and display the prize information in the corresponding square. Final Effect Diagram:

I would like to read this article, you will probably know that the TV show in the lottery is a trick, may no longer participate.

In short, I hope you can edit this article from small harvest, for everyone to learn PHP programming help.