原理
先看圖javascript

能夠看到1-6等獎都只有1個 ,7等獎有6個。指針默認指向上圖位置,記爲0°。php
每一個獎項對應不一樣的角度,圓的角度爲360°,分紅12塊,因此每塊爲30°。css
爲了防止指針指着相鄰兩個將向之間的線,因此記爲一等獎的最小角度爲1°,最大角度爲29°。同理可找出其餘獎項的角度,這要注意,七等獎有6個。html
而後呢,每一個獎項都有不一樣的中獎機率,咱們根據機率來獲取獎項(機率能夠設置爲0,你懂的~),獲取獎品後,在根據最大和最小角度生成一個隨機數,來讓指針旋轉便可..java
HTML代碼
代碼是基於thinkphp的,若是你的不是,修改裏面的url路徑就好了jquery
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="keywords" content="幸運大轉盤,cnsecer.com" />
- <meta name="description" content="幸運大轉盤" />
- <title>幸運大轉盤</title>
- <style type="text/css">
- .demo{width:417px; height:417px; position:relative; margin:50px auto}
- #disk{width:417px; height:417px; background:url(__STATIC__/images/disk.jpg) no-repeat}
- #start{width:163px; height:320px; position:absolute; top:46px; left:130px;}
- #start img{cursor:pointer}
- </style>
- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
- <script type="text/javascript" src="__STATIC__/js/jQueryRotate.2.2.js"></script>
- <script type="text/javascript" src="__STATIC__/js/jquery.easing.min.js"></script>
- <script type="text/javascript">
- $(function(){
- $("#startbtn").click(function(){
- lottery();
- });
- });
- function lottery(){
- $.ajax({
- type: 'POST',
- url: '{:U(\'game/run\')}', //提交地址 改成你本身的
- dataType: 'json',
- cache: false,
- error: function(){
- alert('出錯了!');
- return false;
- },
- success:function(json){
- $("#startbtn").unbind('click').css("cursor","default");
- var a = json.angle; //角度
- var p = json.prize; //獎項
- $("#startbtn").rotate({
- duration:3000, //轉動時間
- angle: 0,
- animateTo:1800+a, //轉動角度
- easing: $.easing.easeOutSine,
- callback: function(){
- var con = confirm('恭喜你,中得'+p+'\n還要再來一次嗎?');
- if(con){
- lottery();
- }else{
- return false;
- }
- }
- });
- }
- });
- }
-
- </script>
- </head>
-
- <body>
-
- <div id="main">
- <div class="msg"></div>
- <div class="demo">
- <div id="disk"></div>
- <div id="start"><img src="__STATIC__/images/start.png" id="startbtn"></div>
- </div>
- </div>
- <div id="footer">
- </div>
-
- </body>
- </html>
後臺處理代碼
- <?php
-
- namespace Home\Controller;
-
- use Think\Controller;
-
- class GameController extends BaseController{
-
- public function index(){
- $this->display("index");
- }
-
- public function run(){
- $proArr = array();
- //v 是中獎機率 相加以後最好爲100的整數倍 id爲獎品編號 min max 分別爲最大和最小角度
- $prize_arr = array(
- '0' => array('id'=>1,'min'=>1,'max'=>29,'prize'=>'一等獎','v'=>0),
- '1' => array('id'=>2,'min'=>302,'max'=>328,'prize'=>'二等獎','v'=>0),
- '2' => array('id'=>3,'min'=>242,'max'=>268,'prize'=>'三等獎','v'=>0),
- '3' => array('id'=>4,'min'=>182,'max'=>208,'prize'=>'四等獎','v'=>0),
- '4' => array('id'=>5,'min'=>122,'max'=>148,'prize'=>'五等獎','v'=>0),
- '5' => array('id'=>6,'min'=>62,'max'=>88,'prize'=>'六等獎','v'=>0),
- '6' => array('id'=>7,'min'=>array(32,92,152,212,272,332), 'max'=>array(58,118,178,238,298,358),'prize'=>'七等獎','v'=>100)
- );
- //獲取隨機獎品
- foreach ($prize_arr as $v) {
- $proArr[$v['id']] = $v['v'];
- }
- $rid = $this->getRand($proArr); //根據機率獲取獎項id
-
- $res = $prize_arr[$rid-1]; //中獎項
- // dd($res);die;
- $min = $res['min'];
- $max = $res['max'];
-
- if($res['id']==7){ //七等獎
- $i = mt_rand(0,5);
- $result['angle'] = mt_rand($min[$i],$max[$i]);
- }else{
- $result['angle'] = mt_rand($min,$max); //隨機生成一個角度
- }
- $result['prize'] = $res['prize'];
-
- echo json_encode($result);
- }
- protected function getRand($proArr) {
- $result = '';
-
- //機率數組的總機率精度
- $proSum = array_sum($proArr);
-
- //機率數組循環
- foreach ($proArr as $key => $proCur) {
- $randNum = mt_rand(1, $proSum);
- if ($randNum <= $proCur) {
- $result = $key;
- break;
- } else {
- $proSum -= $proCur;
- }
- }
- unset ($proArr);
-
- return $result;
- }
- }