轉(zhuǎn)盤(pán)抽獎(jiǎng)功能的實(shí)現(xiàn)思路和源碼分享
現(xiàn)在很多手機(jī)版網(wǎng)站都有轉(zhuǎn)盤(pán)抽獎(jiǎng)的功能,用積分或者很少的幾元錢(qián)就可以參與一次抽獎(jiǎng)?,F(xiàn)在就說(shuō)一下抽獎(jiǎng)功能的實(shí)現(xiàn)思路。
前端實(shí)現(xiàn)主要靠3個(gè)Jquery庫(kù)文件。
<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'=>'一等獎(jiǎng)','v'=>1),
'1' => array('id'=>2,'min'=>302,'max'=>328,'prize'=>'二等獎(jiǎng)','v'=>2),
'2' => array('id'=>3,'min'=>242,'max'=>268,'prize'=>'三等獎(jiǎng)','v'=>5),
'3' => array('id'=>4, 'min'=>182,'max'=>208,'prize'=>'四等獎(jiǎng)', 'v'=>7),
'4' => array('id'=>5,'min'=>122,'max'=>148,'prize'=>'五等獎(jiǎng)','v'=>10),
'5' => array('id'=>6,'min'=>62,'max'=>88,'prize'=>'六等獎(jiǎng)','v'=>25),
'6' => array('id'=>7,'min'=>array(32,92,152,212,272,332),'max'=>array(58,118,178,238,298,358),'prize'=>'七等獎(jiǎng)','v'=>50)
);
獎(jiǎng)項(xiàng)的設(shè)置和概率分配。請(qǐng)注意,這里各個(gè)獎(jiǎng)項(xiàng)的角度設(shè)置要跟轉(zhuǎn)盤(pán)上的獎(jiǎng)項(xiàng)分別對(duì)應(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;//獎(jiǎng)項(xiàng)
var n = json.num;//剩余抽獎(jiǎng)次數(shù)
if(p!="" && a!=0){
$("#startbtn").rotate({
duration:3000, //轉(zhuǎn)動(dòng)時(shí)間
angle: 0, //默認(rèn)角度
animateTo:3600+a, //轉(zhuǎn)動(dòng)角度
easing: $.easing.easeOutSine,
callback: function(){
var con = confirm('恭喜你,中得'+p+'您還有'+n+'次抽獎(jiǎng)次數(shù),還要再來(lái)一次嗎?');
$("#startbtn").rotate({angle:0});
$("#startbtn").css("cursor","pointer");
if(!con){
$("#startbtn").unbind('click').css("cursor","default");
}
}
});
}else{
alert("您已經(jīng)沒(méi)有抽獎(jiǎng)次數(shù)了!");
}
}
})
})
}
演示地址:
http://m.0475seo.com/disk/disk.html
也可以增加數(shù)據(jù)庫(kù)的表來(lái)保存每次抽獎(jiǎng)的記錄。然后扣除相應(yīng)的積分。會(huì)員和管理員在后臺(tái)可以查看。
如果你在開(kāi)發(fā)轉(zhuǎn)盤(pán)抽獎(jiǎng)功能的時(shí)候需要幫助,請(qǐng)跟我聯(lián)系:QQ804752009
相關(guān)推薦
-
無(wú)相關(guān)信息