» » Use PHP + jQuery to achieve flap Sweepstakes

 

Use PHP + jQuery to achieve flap Sweepstakes

Author: bamboo06 on 8-11-2014, 04:11, views: 5600

6
There in a television program called the flap a lottery sweepstakes form for the time being, there is a stage wall, wall to place several large squares, host or sweepstakes who opened the box corresponding to announced the winning results. Similar lottery form can also be applied in the WEB, this article will use PHP + jQuery for you to explain how to achieve the flap lottery program.

Draw flap implementation process: Front page offers six squares, followed by the numbers 1-6 represent six different squares, when the draw clicks six squares in a one time, flip to the back of the box to show the winning lottery information. A seemingly simple procedure, but contains a lot of knowledge WEB technology, so the reader of this article should be proficient jQuery and PHP knowledge.
HTML
And site on the articles using jQuery + PHP + Mysql to achieve lottery program is different, flap lottery lottery does not provide the start and end buttons, lottery themselves decide which one to select the box to complete the draw, so we page placed 6 squares, and treated with 1-6 to represent the different blocks.
     <p>First prize: Tablet PC, second prize: digital cameras, third prize: speaker equipment, Fourth Prize: 4G USB, five prize: $2 <br/> Click digital box, flip lottery, come and try it with your good luck. </p>
     <ul id="prize">
         <li class="red" title="Click lottery">1</li>
         <li class="green" title="Click lottery">2</li>
         <li class="blue" title="Click lottery">3</li>
         <li class="purple" title="Click lottery">4</li>
         <li class="olive" title="Click lottery">5</li>
         <li class="brown" title="Click lottery">6</li>
     </ul>
     <div style="clear:both; margin-top:20px"><a href="javascript:void(0)" id="viewother">[Open others]</a><a href="javascript:void(0);" id="repeat">[Retry again?]</a></div>
     <div id="data"></div>     <p>First prize: Tablet PC, second prize: digital cameras, third prize: speaker equipment, Fourth Prize: 4G USB, five prize: $2 <br/> Click digital box, flip lottery, come and try it with your good luck. </p>
     <ul id="prize">
         <li class="red" title="Click lottery">1</li>
         <li class="green" title="Click lottery">2</li>
         <li class="blue" title="Click lottery">3</li>
         <li class="purple" title="Click lottery">4</li>
         <li class="olive" title="Click lottery">5</li>
         <li class="brown" title="Click lottery">6</li>
     </ul>
     <div style="clear:both; margin-top:20px"><a href="javascript:void(0)" id="viewother">[Open others]</a><a href="javascript:void(0);" id="repeat">[Retry again?]</a></div>
     <div id="data"></div>

html structure, we use an unordered list placed six different squares, each li in clas property represents the color of the box, the list below is a link to a # viewother, later used to complete the draw, click on it, look other squares on the back of winning information, is hidden by default. Then there is a div # data, it is empty, the role is not drawn for temporarily storing data to other awards, the specific situation to see the code behind. To make 6 squares side by side looks comfortable point, you need to use CSS to beautify the next, specifically referring to demo, this article is no longer posted css code.
PHP
We first complete PHP backend processes, the main work of PHP is responsible for configuring the probability of winning awards and corresponding to the current end of the page, click the box when you flip a PHP backend will want to send ajax request, PHP backend configuration based on probability by probabilistic algorithms gives the winning results while not winning the award together with the information sent to the JSON data format to the front page.
First look at the probability calculation functions.
function get_rand($proArr) { 
    $result = ''; 
 
    //The total probability of accuracy 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 code is a classic probabilistic algorithms, $ proArr is an array of pre-set, assuming that the array is: array (100,200,300,400), began to be screened range from 1,1000 this probability whether the first number in his probability within the range, if not, then the probability space, which is just the value of k minus the probability that the digital space, which in this case is minus 100, that the second number in the range of 1,900 within the screening. Such screening to the final, there will always be a few meet the requirements. Is equivalent to touch something in a box, not the first one, the second is not, and the third is not yes, that last one certainly yes. This algorithm is simple, but the efficiency is very high, the key is the algorithm has been used in our previous projects, especially the large amount of data items in great efficiency.
Next we configure the award by PHP.
$prize_arr = array( 
    '0' => array('id'=>1,'prize'=>'Table pc','v'=>1), 
    '1' => array('id'=>2,'prize'=>'Digital camera','v'=>5), 
    '2' => array('id'=>3,'prize'=>'Audio','v'=>10), 
    '3' => array('id'=>4,'prize'=>'4G U','v'=>12), 
    '4' => array('id'=>5,'prize'=>'$2','v'=>22), 
    '5' => array('id'=>6,'prize'=>'Oh, Sorry this time.','v'=>50), 
); 

Prize_arr is a two-dimensional array, which records all the information for this lucky draw prizes, where id represents the winning grade, prize, said prize, v represents the probability of winning. Note where v must be an integer, you can award the corresponding v is set to 0, which means that the probability of the award is drawn 0, v array sum (base), base to reflect the greater the probability of accuracy . In this case the sum of v is 100, then the tablet corresponding to the winning probability is 1%, if the sum of v is 10000, that is one ten thousandth of the probability of winning.
Front page of each request, PHP loop Awards array by calculating the probability function get_rand get drawn award id. The winning prize is stored in the array $ res ['yes'], whereas the rest are not winning the information stored in the $ res ['no'], the last number of data output json to the front page.
foreach ($prize_arr as $key => $val) { 
    $arr[$val['id']] = $val['v']; 
} 
 
$rid = get_rand($arr); //Get award id according to the probability
 
$res['yes'] = $prize_arr[$rid-1]['prize']; //prized items 
unset($prize_arr[$rid-1]); //The awards will be removed from the array, and the rest of the awards are not
shuffle($prize_arr); //shuffle 
for($i=0;$i<count($prize_arr);$i++){ 
    $pr[] = $prize_arr[$i]['prize']; 
} 
$res['no'] = $pr; 
echo json_encode($res); 

Direct output would have a winning message, why the information is not winning but also output to the front page it? Look at the back of the front-end code.
jQuery
First, in order to achieve the flap effect, we need to flip the plug-ins and pre-loaded 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> 

You can flip the plug on its official website: http: //lab.smashup.it/flip/ for more information.
Next, we have the page by clicking on the box to complete the draw behavior.
$(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; //Drawn award
                p.flip({ 
                    direction:'rl', //Turning direction: right to left
                    content:prize, //Content that is displayed after flipping prizes
                    color:c,  //background color 
                    onEnd: function(){ //Flip End 
                        p.css({"font-size":"22px","line-height":"100px"}); 
                        p.attr("id","r"); //Winning box labeled id
                        $("#viewother").show(); //Show See other buttons
                        $("#prize li").unbind('click') 
                        .css("cursor","default").removeAttr("title"); 
                    } 
                }); 
                $("#data").data("nolist",json.no); //Save not winning information
            }); 
        }); 
    }); 
}); 

Code to traverse the six squares, each square is initialized to a different background color, click the current square, using $ .getJSON background data.php to send ajax request, the request is successful, call the flip flip box plug-in implementation, in obtaining the winning information displayed on the block after flip, flip over, marking the winning squares id, also freeze the click event on the box that unbind ('click'), the purpose is to let the lottery can only smoked once, smoked after each box can not flip a. Finally, the award will not draw information data () is stored in the #data in.
In fact, this step has been completed sweepstakes, in order to be able to see what other hidden box on the back of what we are given one after the draw can view links to other boxes on the back. By clicking the link, the other five squares rotate the back of the award information displayed.
$(function(){ 
    $("#viewother").click(function(){ 
        var mydata = $("#data").data("nolist"); //read data
        var mydata2 = eval(mydata);//By eval () function can be converted into an array of JSON
              
        $("#prize li").not($('#r')[0]).each(function(index){ 
            var pr = $(this); 
            pr.flip({ 
                direction:'bt', 
                color:'lightgrey', 
                content:mydata2[index], //Prizes information (not drawn)
                onEnd:function(){ 
                    pr.css({"font-size":"22px","line-height":"100px","color":"#333"}); 
                    $("#viewother").hide(); 
                } 
            }); 
        }); 
        $("#data").removeData("nolist"); 
    }); 
}); 

When you click #viewother, are not saved when you get drawn in the lottery prize data, and convert it into an array, flip five squares, prize information will be displayed in the corresponding box.
Why am I not spare Awards?
In many similar sweepstakes, participants tend to smoke less than winning, I give an example from the perspective of the program for you to see, if I were the organizers sweepstakes, I set up six awards, each award winning different probability, if the prize is a limousine, but I set up where the award probability is zero, which means what? This means that regardless of how those participation the lottery draw, never get this limousine. When turning the rest of the box every time the organizers, participants will find perhaps the first prize in a raffle box next to the figure just under, blame their own bad luck. Really bad luck it? In fact, when participants turning the box in the awards program has been decided, and flip view other awards just a box to see smoke bomb, confuse the audience and participants. I think after reading this article, you might know that television programs flap lottery tricky, and you may probably not going to re-election ShuangSeQiu the machine.
BUG FIX: thank enthusiastic users Samukawa and Tears continuous feedback about the flip bug, the solution after the click event, ajax click event insert the code before the restrictions:
$("#prize li").unbind('click');

Category: PHP Scripts / Javascript

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
22 October 2017 23:27

jack

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
This is the best and most informative blog post i have read so far!You have explained the topic in a way that everyone can understand.I have been reading posts these days and honestly speaking,they are really good and your writing skills are on spot. You should definitely try best dissertation writing services uk as a side niche.

<
  • 0 Comments
  • 0 Articles
22 November 2017 23:10

Julian john Leah

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Sounds interesting and quite something we don't get to see daily. I have been doing a number of edu birdie review and all have been super collective for me, Thanks again for such wonderful post of yours

<
  • 0 Comments
  • 0 Articles
14 February 2018 21:38

Kolkata Escorts

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Beauti Queen amazing kolkata escorts agency alwyas ready for you at your doorstep. Beauti Queen provide you high profile independent girl in kolkata, escorts service in kolkata, kolkata escorts. If you are looking for the ultimate encounter in Kolkata then I am your sophisticated young Kolkata escorts that provides upscale companionship for making your night becomes true.
escorts service in kolkata, kolkata escorts,escorts in kolkata, independent escorts in kolkata, female escorts in kolkata

<
  • 0 Comments
  • 0 Articles
17 February 2018 10:46

Kolkata Escorts

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Renu Das Kolkata Escorts Services has gorgeous females provides Independent Escorts Service in Kolkata call girls at 100% satisfaction with VIP models. Provided Kolkata escorts at our agency are professional in nature and are eager to serve you at your place.
kolkata escorts, escorts in kolkata, escorts service in kolkata, female escorts in kolkata, escorts agency in kolkata, independent escorts in kolkata

<
  • 0 Comments
  • 0 Articles
2 March 2018 20:33

Delhi Escorts

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Riya Chaudhary is an Independent Delhi Escort girl, who offers dazzling hot Delhi Escorts Service, incall or outcall services both to complete your dreams in real entertainment. We offers high class Independent Escorts in Delhi at Riya Chaudhary Delhi Escorts service agency for elite peoples in the city to avail ultimate satisfaction. you can spend your beautiful moments.
delhi escorts, independent escorts in delhi, escorts in delhi

<
  • 0 Comments
  • 0 Articles
5 March 2018 09:40

Delhi Escorts

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Riya Chaudhary is an Independent Delhi Escort girl. We offering high class Independent escorts service in Delhi for elite peoples in the city to available ultimate satisfaction. you can spend your beautiful moments 24x7.
delhi escorts, independent escorts in delhi, escorts in delhi

Information
Comment on the news site is possible only within (days) days from the date of publication.