简单实现大转盘抽奖

实现效果:
点击“开始抽奖”，异步到后台请求抽奖结果，指针根据后台返回的结果指向奖项。
效果图:

前端：
1.引入

jquery以及jquery.rotate.min.js

2.页面

 <div class="rotary-main">
              <ul class="rotary-list">
                <li class="prize item1"><img src="<ls:templateResource item='/resources/templets/goat/images/thanks.png'/>"></li>
                <li class="prize item2"><img src="<ls:templateResource item='/resources/templets/goat/images/first-prize.png'/>"></li>
                <li class="prize item3"><img src="<ls:templateResource item='/resources/templets/goat/images/thanks.png'/>"></li>
                <li class="prize item4"><img src="<ls:templateResource item='/resources/templets/goat/images/third-prize.png'/>"></li>
                <li class="prize item5"><img src="<ls:templateResource item='/resources/templets/goat/images/thanks.png'/>"></li>
                <li class="prize item6"><img src="<ls:templateResource item='/resources/templets/goat/images/second-prize.png'/>"></li>
                <li class="prize item7"><img src="<ls:templateResource item='/resources/templets/goat/images/thanks.png'/>"></li>
                <li class="prize item8"><img src="<ls:templateResource item='/resources/templets/goat/images/third-prize.png'/>"></li>
              </ul>
              <div class="rotary-btn" ></div>
            </div>

其中li标签的是图片，这里需注意，rotary-btn则是“开始抽奖”按钮。

3.JS
1.写转盘转动的方法

function scollRote(angles){
    $(".rotary-btn").rotate({
         angle:0,
         animateTo:angles+1800,
         duration:6000,
         callback:function (){}
    });
}

参数：angles是转动的角度，主要是根据后台返回的结果控制指针转向，
duration转盘转动的时间。。。。
具体参数可参考rotate插件的用法。
转动的角度，需自己根据图片多少计算计算，

1.开始抽奖绑定事件

function bind(){
    $(".rotary-btn").bind("click",function(){
        btnRotate();
    });
}

2.抽奖：异步请求，根据返回结果调用转盘转动的方法，并控制指针指向

//抽奖
function btnRotate(){
     //解绑，指针转动的时候不可再次请求
    $(".rotary-btn").unbind("click"); 
    //抽奖请求，返回抽奖结果
     $.ajax({
            url:  "?", 
            type:'post',  
            async : true, //默认为true 异步   
            data:{},
            dataType : 'json',
            error: function(jqXHR, textStatus, errorThrown) {
            },
            beforeSend:function(){},
            success:function(data){
                              //比如这里返回的data是不中奖
                              //不中奖的图片所对应角度数组，然后随机返回，使指针根据角度指向图片
                        var animateTo=[0,90,180,270]; 
                        scollRote(animateTo[Math.floor(Math.random()*animateTo.length)]);
                        setTimeout(function(){
                            //由于指针转动设定为6000，那我同步时间，等待指针停止，再进行其他提示操作，这里是再绑定指针转动方法
                            bind();
                        }, 6000);
            }
        });

}

注：这里指针指向图片的角度需自己计算，一圈360，可根据图片的个数进行相除

后台:
简单抽奖概率逻辑：
比如20/100;

int randomNum = 0;
        Random rand = new Random();  
        for(int i = 0 ;i<fz;i++){
            randomNum = (int)(rand.nextInt(fm));
            if(randomNum==1||randomNum==2||randomNum==3){
              break;
            }
        }

其中fz是20，fm是100，如果随机数返回1，2，3就代表中奖
除此简单逻辑也可以复制做，设置中奖期间，随机数返回某个期间就代表某个奖项。