最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery幸运大转盘_jQuery+PHP抽奖程序(下)

来源:http://www.erdangjiade.com/ 沐浴春风 2014-12-09 21:29浏览(1888)

上一篇讲解了幸运大转盘前端,而本文继续讲下半部分:PHP控制抽奖几率并最终实现转盘抽奖。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery幸运大转盘_jQuery+PHP抽奖程序(下)
分类:图片代码 > 鼠标滑过 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

PHP

首先,在ajax.php中创建一个奖项对应角度和中奖几率二维数组:

$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表示最大角度
    //prize表示奖项内容,v表示中奖几率(若数组中七个奖项的v的总和为100,如果v的值为1,则代表中奖几率为1%,依此类推)
 );

中奖概率方法我们之前在jQuery砸金蛋_PHP砸金蛋讲过,代码如下

function getRand($proArr) {
    $data = '';
    $proSum = array_sum($proArr); //概率数组的总概率精度 

    foreach ($proArr as $k => $v) { //概率数组循环
        $randNum = mt_rand(1, $proSum);
        if ($randNum <= $v) {
            $data = $k;
            break;
        } else {
            $proSum -= $v;
        }
    }
    unset($proArr);

    return $data;
}

函数getRand()会根据数组中设置的几率计算出符合条件的id,我们可以接着调用getRand()。

foreach ($prize_arr as $v) {
    $arr[$v['id']] = $v['v'];
}

$prize_id = getRand($arr); //根据概率获取奖项id 

$res = $prize_arr[$prize_id - 1]; //中奖项 
$min = $res['min'];
$max = $res['max'];
if ($res['id'] == 7) { //七等奖 
    $i = mt_rand(0, 5);
    $data['angle'] = mt_rand($min[$i], $max[$i]);
} else {
    $data['angle'] = mt_rand($min, $max); //随机生成一个角度 
}
$data['prize'] = $res['prize'];

echo json_encode($data);

jQuery

接着点击”开始抽奖“按钮,便会向后台ajax.php请求并返回奖项信息,这时指针开始转动,指针最终停留位置是由ajax.php返回值angle 来决定的,这样我们就可以控制概率和前端指针转动停留位置。代码如下:

$(function() {
    $("#startbtn").click(function() {
        lottery();
    });
});
function lottery() {
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        dataType: 'json',
        cache: false,
        error: function() {
            alert('Sorry,出错了!');
            return false;
        },
        success: function(json) {
            $("#startbtn").unbind('click').css("cursor", "default");
            var angle = json.angle; //指针角度 
            var prize = json.prize; //中奖奖项标题 
            $("#startbtn").rotate({
                duration: 3000,//转动时间 ms
                angle: 0, //从0度开始
                animateTo: 3600 + angle,//转动角度 
                easing: $.easing.easeOutSine, //easing扩展动画效果
                callback: function() {
                    var resulte = confirm('恭喜您中得' + prize + '\n想要继续吗?');
                    if (resulte) { //若是点击确定,继续抽奖
                        lottery();
                    }
                }
            });
        }
    });
}

若您对转盘前端转动效果不明白,建议您先阅读幸运大转盘jQuery幸运大转盘_jQuery+PHP抽奖程序(上),动画效果easing可参考jquery.easing动画插件

标签: 抽奖转盘
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/20.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    11-03 09:40
    ngu137
    不错 好玩啊啊啊。。。。。
1 2