Jquery+php the method of realizing the lottery function of micro-letter turntable _jquery

This paper illustrates the method of realizing the jquery+php of micro-letter turntable. Share to everyone for your reference, specific as follows:

In this paper, we will use jquery and PHP to implement the lottery drawing process with examples.

Preparatory work

First to prepare the material, draw the interface to use two pictures, disk pictures and pointer pictures, the actual application can be based on different needs to produce different disk pictures.

Then make the HTML page, in the example we add the following code to the body:

<div class= "Demo" >
  <div id= "Disk" ></div>
  <div id= "Start" ></div>
</div>

We use #disk to place the disk background picture, controls in the CSS, uses the #start to place the pointer picture start.png.

Then we use CSS to control the position of the pointer and the disk, the code reads as follows:

Copy Code code as follows:

DEMO{WIDTH:417PX height:417px; position:relative margin:50px Auto} #disk {width:417px; height:417px; background:url (disk.jpg) No-repeat} #start {width:163px; height:320px; position:absolute; top:46px; left:130px;} #start img{cursor: pointer}

Jquery

For the pointer to rotate, if not with flash, we can use HTML5 canvas to achieve the rotation of the picture, but we need to consider browser compatibility, and a jquery plug-in can fully implement the image (any HTML elements) to rotate and compatible with the major browsers, It's jqueryrotate.js.

With Jqueryrotate.js, you can rotate a picture to any angle, you can bind the mouse event, you can set the rotation process animation effect, and the callback callback function.

The method of course is to load the jquery library file and Jqueryrotate.js in the head first, and then we can use the following code to implement the pointer rotation.

$ (function () {
  $ ("#startbtn"). Rotate ({
    bind:{
      click:function () {//Binding click event
         var a = Math.floor ( Math.random () * 360); Generate random number
         $ (this). Rotate ({
             duration:3000,//rotation time interval (rotational speed)
             angle:0,//Starting angle
            animateto:3600+a,//rotation angle, 10 laps +
            easing: $.easing.easeoutsine,//Animation extension
            callback:function () {//callback function
              alert (' Jackpot! ');
            }
         });
      }
    }
  });
});

The above code is implemented: when the "Start Draw" button is clicked, the pointer starts to rotate, the rotation angle is 3600+a, that is, 10 laps and then rotates the randomly generated angle of a, and when the angle of rotation reaches 3600+a, it stops turning.

Php

First, we set the corresponding angle and the probability of winning according to the prizes on the lottery disc, we build a multidimensional array in data.php:

$prize _arr = Array ('
  0 ' => array (' ID ' =>1, ' min ' =>1, ' Max ' =>29, ' Prize ' => ' first prize ', ' V ' =>1 '),
  ' 1 ' = > Array (' ID ' =>2, ' min ' =>302, ' Max ' =>328, ' Prize ' => ' Second Prize ', ' V ' =>2 '),
  ' 2 ' => array (' ID ' =>3, ' Min ' =>242, ' Max ' =>268, ' Prize ' => ' third prize ', ' V ' =>5 ',
  ' 3 ' => array (' ID ' =>4, ' min ' =>182, ' Max ' => =>, ' Prize ', ' Four awards ', ' V ' =>7 ',
  ' 4 ' => array (' ID ' =>5, ' min ' =>122, ' Max ' =>148, ' Prize ' => ' award ', ' V ' =>10),
  ' 5 ' => array (' ID ' =>6, ' min ' =>62, ' Max ' =>88, ' Prize ' => ' six-Prize ', ' V ' =>25),
  ' 6 ' => Array (' ID ' =>7, ' min ' =>array (32,92,152,212,272,332),
' Max ' =>array (58,118,178,238,298,358), ' prize ' = > ' VII Award ', ' V ' =>50) '
;

The array $prize_arr,id is used to identify different awards, Min represents the minimum angle of each award interval in the disc, Max represents the maximum angle, such as the minimum angle of the first prize: 0, the maximum angle 30, where we set the max value to 1, the max value is 29, is to avoid the draw after the pointer points to two adjacent to the Center line of awards. Because there are several seven prizes in the disc, we set the angle range for each of the seven awards in the array. Prize for the award, V for the odds of winning, we'll find that the sum of the seven awards in the array is 100, and if V is 1, the odds are 1%, and so on.

On the algorithm of winning probability

function Getrand ($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 function Getrand () calculates the qualifying ID based on the probability set in the array, and we can then invoke Getrand ().

foreach ($prize _arr as $key => $val) {
  $arr [$val [' id ']] = $val [' V '];
}
$rid = Getrand ($arr); According to the probability to obtain the award ID
 $res = $prize _arr[$rid-1];//In the award $min = $res [' min '];
$max = $res [' Max '];
if ($res [' id ']==7] {//Seven prize
  $i = Mt_rand (0,5);
  $result [' angle '] = Mt_rand ($min [$i], $max [$i]);
} else{
  $result [' angle '] = Mt_rand ($min, $max);///randomly generate an angle
  }
$result [' prize '] = $res [' Prize
']; echo Json_encode ($result);

In the code, we call Getrand (), get the award after the probability operation, and then generate an angle value between the minimum angle and the maximum angle based on the range of angles configured in the award, and build the array, including the angle angle and the award prize, and eventually output in JSON format.

Jquery

On the basis of the above, we are on the front-end jquery Code transformation, when the "Start Lottery" button, to the background data.php send an AJAX request, if the request succeeds and returns the award information, then turn the pointer, the pointer will eventually point to the position to rotate to the data.php return angle value.

 $ (function () {$ ("#startbtn"). Click (function () {lottery ();
});
}); function lottery () {$.ajax ({type: ' POST ', url: ' data.php ', DataType: ' json ', Cache:false, error:f Unction () {alert (' ERROR!
      ');
    return false;
      }, Success:function (JSON) {$ ("#startbtn"). Unbind (' click '). CSS ("cursor", "Default"); var a = Json.angle; Angle var p = json.prize;         Awards $ ("#startbtn"). Rotate ({duration:3000,//Rotational time angle:0, animateto:1800+a,//Rotation angle Easing: $.easing.easeoutsine, callback:function () {var con = confirm (' Congratulations, get ' +p+ ') do you want to do it again?
          ');
          if (Con) {lottery ();
          }else{return false;
    }
        }
      });
}
  }); }

We build a custom function lottery (), in lottery () we send a POST request to data.php, if the successful return of winning information, call the Rotate plug-in to start rotating, the angle of rotation from the back of the background decision, here we use 1800+ A refers to the rotation angle, that is, the pointer rotation 6 laps +a after the stop, and then we click the "Start Draw" button to call Lottery (), so the turntable draw is completed.

More interested readers of jquery-related content can view the site's topics: A summary of Ajax usage in jquery, a summary of jquery table (table) operations tips, a summary of jquery drag-and-drop effects and techniques, a summary of jquery extension techniques, jquery Common Classic Effects Summary "jquery animation and special effects usage Summary", "jquery selector usage Summary" and "jquery common Plug-ins and Usage summary"

I hope this article will help you with the jquery program design.