轉盤抽獎功能的實現思路和源碼分享

 現在很多手機版網站都有轉盤抽獎的功能，用積分或者很少的幾元錢就可以參與一次抽獎。現在就說一下抽獎功能的實現思路。

前端實現主要靠3個Jquery庫文件。

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>

<script type="text/javascript" src="js/jquery.easing.min.js"></script>

//概率分布

$prize_arr = array(

  '0' => array('id'=>1,'min'=>1, 'max'=>29,'prize'=>'一等獎','v'=>1),

  '1' => array('id'=>2,'min'=>302,'max'=>328,'prize'=>'二等獎','v'=>2),

  '2' => array('id'=>3,'min'=>242,'max'=>268,'prize'=>'三等獎','v'=>5),

  '3' => array('id'=>4, 'min'=>182,'max'=>208,'prize'=>'四等獎',  'v'=>7), 

  '4' => array('id'=>5,'min'=>122,'max'=>148,'prize'=>'五等獎','v'=>10),

  '5' => array('id'=>6,'min'=>62,'max'=>88,'prize'=>'六等獎','v'=>25),

  '6' => array('id'=>7,'min'=>array(32,92,152,212,272,332),'max'=>array(58,118,178,238,298,358),'prize'=>'七等獎','v'=>50) 

  ); 

獎項的設置和概率分配。請注意，這里各個獎項的角度設置要跟轉盤上的獎項分別對應。就是Min,Max部分的角度設置。

$(function(){

        lottery();

});

function lottery(){

$("#startbtn").click(function(){

$.ajax({

type: 'POST',

url: '/disk/magic.php',

dataType: 'json',

cache: false,

error: function(){

alert('出錯了！');

return false;

},

success:function(json){

var a = parseInt(json.angle); //角度

var p = json.praisename;//獎項

var n = json.num;//剩余抽獎次數

if(p!="" && a!=0){

$("#startbtn").rotate({

duration:3000, //轉動時間

angle: 0, //默認角度

animateTo:3600+a, //轉動角度

easing: $.easing.easeOutSine,

callback: function(){

var con = confirm('恭喜你，中得'+p+'您還有'+n+'次抽獎次數，還要再來一次嗎？');

$("#startbtn").rotate({angle:0});

$("#startbtn").css("cursor","pointer");

if(!con){

$("#startbtn").unbind('click').css("cursor","default");

}

}

});

}else{

alert("您已經沒有抽獎次數了！");

}

}

})

})

}

演示地址：

http://m.0475seo.com/disk/disk.html

也可以增加數據庫的表來保存每次抽獎的記錄。然后扣除相應的積分。會員和管理員在后臺可以查看。

如果你在開發轉盤抽獎功能的時候需要幫助，請跟我聯系：QQ804752009