轉(zhuǎn)盤抽獎功能的實(shí)現(xiàn)思路和源碼分享
現(xiàn)在很多手機(jī)版網(wǎng)站都有轉(zhuǎn)盤抽獎的功能,用積分或者很少的幾元錢就可以參與一次抽獎?,F(xiàn)在就說一下抽獎功能的實(shí)現(xiàn)思路。
前端實(shí)現(xiàn)主要靠3個(gè)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)
);
獎項(xiàng)的設(shè)置和概率分配。請注意,這里各個(gè)獎項(xiàng)的角度設(shè)置要跟轉(zhuǎn)盤上的獎項(xiàng)分別對應(yīng)。就是Min,Max部分的角度設(shè)置。
$(function(){
lottery();
});
function lottery(){
$("#startbtn").click(function(){
$.ajax({
type: 'POST',
url: '/disk/magic.php',
dataType: 'json',
cache: false,
error: function(){
alert('出錯(cuò)了!');
return false;
},
success:function(json){
var a = parseInt(json.angle); //角度
var p = json.praisename;//獎項(xiàng)
var n = json.num;//剩余抽獎次數(shù)
if(p!="" && a!=0){
$("#startbtn").rotate({
duration:3000, //轉(zhuǎn)動時(shí)間
angle: 0, //默認(rèn)角度
animateTo:3600+a, //轉(zhuǎn)動角度
easing: $.easing.easeOutSine,
callback: function(){
var con = confirm('恭喜你,中得'+p+'您還有'+n+'次抽獎次數(shù),還要再來一次嗎?');
$("#startbtn").rotate({angle:0});
$("#startbtn").css("cursor","pointer");
if(!con){
$("#startbtn").unbind('click').css("cursor","default");
}
}
});
}else{
alert("您已經(jīng)沒有抽獎次數(shù)了!");
}
}
})
})
}
演示地址:
http://m.0475seo.com/disk/disk.html
也可以增加數(shù)據(jù)庫的表來保存每次抽獎的記錄。然后扣除相應(yīng)的積分。會員和管理員在后臺可以查看。
如果你在開發(fā)轉(zhuǎn)盤抽獎功能的時(shí)候需要幫助,請跟我聯(lián)系:QQ804752009
相關(guān)推薦
-
無相關(guān)信息