首先要准备两张图片,即圆盘和指针,然后我们在#disk来放置圆盘背景图片,在css中控制,用#start来放置指针图片start.png。

<div id="disk"></div> 

<div id="start"><img src="images/start.png" id="startbtn" alt="转盘开启"/></div>

CSS指针和圆盘样式如下:

#disk{width:417px; height:417px; background:url(images/disk.jpg) no-repeat}  

#start{width:163px; height:320px; position:absolute; top:46px; left:130px;}  

#start img{cursor:pointer}

接着我们引入jquery.js、旋转插件jQueryRotate.2.2.js及动画easing插件jquery.easing.min.jseasing 教程我们已经讲过了,jQuery Easing动画插件。

<script type = "text/javascript" src = "jquery.js" > </script> 

<script type = "text/javascript" src = "jQueryRotate.2.2.js"></script> 

<script type = "text/javascript" src = "jquery.easing.min.js"></script>

最后通过jQueryRotate.js旋转插件,我们让指针转起来。

$(function() { 

    $("#startbtn").rotate({ 

        bind: { 

            click: function() { 

                var random = Math.floor(Math.random() * 360); //生成随机数  

                $(this).rotate({ 

                    duration: 3000, 

                    //转动时间间隔(速度单位ms)  

                    angle: 0, 

                    //指针开始角度  

                    animateTo: 3600 + random, 

                    //转动角度,当转动角度到达3600+random度时停止转动。 

                    easing: $.easing.easeOutSine, 

                    //easing动画效果 

                    callback: function() { //回调函数  

                        alert('恭喜您,中奖了!'); 

                    } 

                }); 

            } 

        } 

    }); 

});

 

下面介绍使用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);

接着点击”开始抽奖“按钮,便会向后台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(); 

                    } 

                } 

            }); 

        } 

    }); 

}