PHP + jQuery ripple drawing function implementation _ php instance

In a TV program, there is a lottery draw, which is also called a flip-board lottery. there is a wall on the stage and several large blocks are placed on the wall. the host or the winner opens the corresponding blocks to reveal the winning results. Similar lottery forms can also be applied to the WEB. This article will use PHP + jQuery to explain how to implement the board drawing program. The implementation process of the lottery: the front-end page provides 6 blocks, which are represented by numbers 1-6 in turn. when the winner clicks a block of 6 blocks, the blocks are flipped to the back, the lottery information is displayed. A seemingly simple operation involves a lot of knowledge about WEB technology. Therefore, readers of this article should be familiar with jQuery and PHP.

HTML
Unlike the previous article on this site, the opening and closing buttons are not provided for the lottery drawing. The winners decide to select one of the blocks to complete the lottery, therefore, we place 6 blocks on the page and use 1-6 to represent different blocks.

 
 
   
  
  
1
   
  
  
2
   
  
  
3
   
  
  
4
   
  
  
5
   
  
  
6
 
 
 
 
[Open others]
 
 

In the html structure, we use an unordered list to place six different squares. The clas attribute in each li represents the color of the square. below the list is a link a # viewother, click it to view the winning information on the back of other squares. The information is hidden by default. Next, there is another p # data, which is empty. it is used to temporarily store data for other awards not being drawn. for details, refer to the code below. To make the six squares look more comfortable side by side, you also need to use CSS to beautify them. for details, refer to the demo. css code will not be pasted in this article.
PHP
We will first complete the PHP process in the background. The main task of PHP is to configure the awards and the corresponding winning probability. when the front-end page clicks a box, we will want PHP to send ajax requests in the background, then, based on the configuration probability, the backend PHP uses the probability algorithm to give the winning result, and sends the unwon award information to the front-end page in JSON format.
Let's look at the probability calculation function.

Function get_rand ($ proArr) {$ result = ''; // The total probability precision of the 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 classic probability algorithm. $ proArr is a preset array. assume that the array is: array (100,200,300,400 ), in the beginning, the probability range is used to determine whether the first number is within the probability range of occurrence. if not, the probability space is used, that is, the probability space of the value of k minus the number just now. In this example, we subtract 100, that is, the second number is filtered within the range of 1,900. In this way, there will always be a number that meet the requirements. It is equivalent to touching something in a box. The first one is not, the second is not, and the third is not. The last one must be. This algorithm is simple and highly efficient. The key is that it has been used in our previous projects, especially in projects with large data volumes.
Next we will use the PHP configuration award.

$ Prize_arr = array ('0' => array ('id' => 1, 'prize' => 'tablet ', 'V' => 1 ), '1' => array ('id' => 2, 'prize' => 'digital camera ', 'V' => 5 ), '2' => array ('id' => 3, 'prize' => 'Speaker device', 'V' => 10 ), '3' => array ('id' => 4, 'prize' => '4G disks', 'V' => 12 ), '4' => array ('id' => 5, 'prize' => '10q coin ', 'V' => 22 ), '5' => array ('id' => 6, 'prize' => 'next time you may be able to get in,', 'V' => 50 ),);

It is a two-dimensional array that records all the prize information for this lottery. the id indicates the winning level, the prize indicates the prize, and the v indicates the winning probability. Note that the value of v must be an integer. you can set the value of v to 0, which means that the probability of the award is 0, and the sum (base) of the value of v in the array ), the larger the base, the more accurate the probability is. In this example, the sum of v is 100, and the probability of winning a tablet is 1%. if the sum of v is 10000, the probability of winning a tablet is one in ten.
Each request on the front-end page sets an array of PHP loop awards. the probability calculation function get_rand is used to obtain the prize id. Save the prize to the array $ res ['yes'], and save the remaining unwon information in $ res ['no, finally, the number of json data is output to the front-end page.

Foreach ($ prize_arr as $ key => $ val) {$ arr [$ val ['id'] = $ val ['V'];} $ rid = get_rand ($ arr); // Obtain the award id based on the probability $ res ['yes'] = $ prize_arr [$ rid-1] ['prize']; // Medium Award unset ($ prize_arr [$ rid-1]); // removes the Medium Award from the array, and the remaining unmiddle award shuffle ($ prize_arr ); // disrupt the array order for ($ I = 0; $ I
 
  

  
You can directly output the winning information. why do you need to output the unwon information to the front-end page? See the front-end code.
JQuery
First, we need to pre-load the flip plug-ins and jquery and jqueryui plug-ins to achieve the flip effect: