可按Ctrl+D收藏 蚂蚁资源网

蚂蚁资源网

本站 精选

jQuery幸运大转盘_jQuery+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(3292152212272332), 
        'max' => array(58118178238298358), 'prize' => '七等奖''v' => 50
    //min数组表示每个个奖项对应的最小角度 max表示最大角度 
    //prize表示奖项内容,v表示中奖几率(若数组中七个奖项的v的总和为100,如果v的值为1,则代表中奖几率为1%,依此类推) 
 );

中奖概率方法我们之前在<a href='http://www.myziyuan.com/js/17.html' target='_blank'>jQuery砸金蛋_PHP砸金蛋</a>讲过,代码如下

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(05); 
    $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(); 
                    } 
                } 
            }); 
        } 
    }); 
}

若您对转盘前端转动效果不明白,建议您先阅读幸运大转盘<a href='http://www.myziyuan.com/js/19.html' target='_blank'>jQuery幸运大转盘_jQuery+PHP抽奖程序(上)</a>,动画效果easing可参考<a href='http://www.myziyuan.com/js/18.html' target='_blank'>jquery.easing动画插件</a>


相关推荐
联系客服
网站客服 联系客服
手机版

扫一扫进手机版
返回顶部