简单实现大转盘抽奖

实现效果:

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

效果图:



前端：

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就代表中奖

除此简单逻辑也可以复制做，设置中奖期间，随机数返回某个期间就代表某个奖项。