本文介绍利用JQ+php实现大转盘的效果。
原理:前端ajax -> php(算法)得出奖品 --》JQ(ajax)根据奖品 显示给用户相应的奖品
1.前端页面 js插件可以网上找一下
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>转盘抽奖</title>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/Rotate.js"></script>
<style>
*{padding:0; margin:0;}
.lotteryMain{ width:100%; padding:20px 0; }
.lotteryBg{ width:520px; height:520px; margin:0 auto; background:url(images/lotteryBg.jpg) no-repeat; position:relative; overflow:hidden;}
#run{ width:153px; height:214px; position:absolute; left:50%; top:50%; margin-left:-76px; margin-top:-107px; z-index:1; transform:rotate(0deg); -ms-transform:rotate(0deg); }
#btn_run{ width:125px; height:125px; background:url(images/btn_start.png) no-repeat; border:none; outline:none; position:absolute; left:50%; top:50%; margin-left:-62px; margin-top:-62px; z-index:2;cursor:pointer;}
</style>
</head>
<body>
<section class="lotteryMain">
<div class="lotteryBg">
<img id="run" src="images/start.png" />
<input id="btn_run" type="button" value="" />
</div>
</section>
<script>
$(function(){
$("#btn_run").click(function(){
$("#btn_run").attr('disabled',true).css("cursor","default");
lottery();
});
});
function lottery(){
$.ajax({
type: 'get',
url: 'json.php',
dataType: 'json',
cache: false,
error: function(){return false;},
success:function(obj){
$("#run").rotate({
duration:3000, //转动时间
angle: 0, //默认角度
animateTo:360*6+obj.rotate, //转动角度
easing: $.easing.easeOutSine,
callback: function(){
alert(obj.results);
$("#btn_run").attr('disabled',false).css("cursor","pointer");
}
});
}
});
};
</script>
</body>
</html>
2.php页面
$prize_arr = array(
'0' => array('id'=>1,'prize'=>'一等奖','rotate'=>60,'v'=>1),
'1' => array('id'=>2,'prize'=>'二等奖','rotate'=>80,'v'=>2),
'2' => array('id'=>3,'prize'=>'三等奖','rotate'=>100,'v'=>5),
'3' => array('id'=>4,'prize'=>'四等奖','rotate'=>120,'v'=>7),
'4' => array('id'=>5,'prize'=>'五等奖','rotate'=>140,'v'=>10),
'5' => array('id'=>6,'prize'=>'六等奖','rotate'=>40,'v'=>25),
'6' => array('id'=>7,'prize'=>'七等奖','rotate'=>20,'v'=>50)
);
foreach ($prize_arr as $key => $val) {
$arr[$val['id']] = $val['v'];
}
$rid = getRand($arr); //根据概率获取奖项id
//$res = function getGift($arr,'v');个人觉得这种算法比较好
$res = $prize_arr[$rid-1]; //中奖项
die(json_encode($res));
3.算法
这里有两种算法。第一种是我在网上找的,基本上都是这种算法。
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;
}
//抽奖算法
function getGift($arr,$key='rotate', $baseNum=3000, $baseDiv=1000, $array=array()){
$num = mt_rand(1, $baseNum);
foreach($arr as $k => $v){
$arr_num = $v['rotate']*3000/1000;
if ($num <= $arr_num) {
if($v['num'] <= 0){//判断奖品是否抽完
continue;
}
return $v;
}
}
return $array;
}