您的位置：首页 > Web前端 > JQuery

php+jqueryRotate实现大转盘抽奖

2014-12-10 11:30 323 查看

思路：点击抽检执行ajax请求，由data.php计算中奖项，把抽检结果项传递给前端页面提示中奖结果。（get_rand（）概率算法可参考http://blog.csdn.net/dongsg11200/article/details/24607877，前端特效参考http://www.helloweba.com/view-blog-216.html）

data.php文件

<?php
//定义抽奖项
$prize_arr=array(
'0' => array('id'=>1,'min'=>137,'max'=>178,'prize'=>'一等奖','v'=>9984),
'1' => array('id'=>2,'min'=>227,'max'=>268,'prize'=>'二等奖','v'=>5),
'2' => array('id'=>3,'min'=>1,'max'=>44,'prize'=>'三等奖','v'=>10),
'3' => array('id'=>4,'min'=>array(47,92,182,272,317),'max'=>array(88,133,223,313,358),'prize'=>'再接再励,下次可能中奖哦！','v'=>1),
);
foreach($prize_arr as $k=>$v){
$varr[$v['id']] = $v['v'];
}
//根据概率获取中奖id
$rid = get_rand($varr);
//中奖项
$rs = $prize_arr[$rid-1];
$min = $rs['min'];
$max = $rs['max'];

//判断￥rs的id是否是3，（判断min和max是否是数组）
if($rs['id']=='4'){
$i = mt_rand(0,4);
$result['angle'] = mt_rand($min[$i],$max[$i]);
}else{
$result['angle'] = mt_rand($min,$max);
}
$result['prize'] = iconv('gb2312','utf-8',$rs['prize']);
$result['rid']=$rs['id'];
echo json_encode($result);
//概率算法
function get_rand($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;
}
?>index.hrml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>抽奖插件前端制作</title>
</head>
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
body{text-align: center; background-color: #1664ad;}
#main_bg{border:0px solid black;width:510px; margin:0 auto;}
#rotate-bg{position:relative; background:url(images/rotate_bg.png) no-repeat; height:510px; width:510px; margin:0 auto;}
#rotate_static{position:absolute; top:148px; left:148px; cursor:pointer;}
</style>
<script type="text/javascript" src="js/jquery.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>
<script type="text/javascript">
$(function(){
$("#imgbutton").click(function(){
sub();
});
});
function sub(){
$.ajax({
type:'POST',
url:'check.php',
dataType:'json',
cache:false,
error:function(){
alert('出错了');
return false;
},
success:function(rs){
$("#imgbutton").unbind('click').css('cursor','default');
var a = rs.angle;//角度
var p = rs.prize; //奖项
var rid = rs.rid;
$("#imgbutton").rotate({
duration:5000,//转动时间
angle:0,
animateTo:1800+a, //转动角度
easing: $.easing.easeOutSine,
callback: function(){
if(rid != 4){
var con = confirm('恭喜你，中得'+p+'请在跳转后填写个人信息，以便于我们给你发送奖品！');
if(con){
window.location('www.talkforex.com');
}else{
return false;
}
}else{
var con = confirm('很遗憾，下次有可能中奖哦！');
if(con){
sub();
}else{
return false;
}
}
}
});
}
});
}
</script>
<body>
<div id="main_bg">
<div id="rotate-bg">
<div id="rotate_static"><img id="imgbutton" src="images/rotate_static.png"/></div>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 抽奖算法 jqueryRotate

相关文章推荐

新的分享

章节导航