一.效果图如下：
实现图
二.技术点实现
- 布局实现 用到了table布局
<!--效果html开始-->
<div id="header">
<div id="frirst1" ></div>
<div id="frirst2" ></div>
</div>
<div id="contain">
<div id="used"></div>
<div id="lottery">
<table border="0" cellpadding="0" cellspacing="8">
<tr>
<td class="lottery-unit lottery-unit-0">
<img src="images/hongbao@2x.png">
<div class="money-0"></div><div class="mask"></div></td>
<td class="lottery-unit lottery-unit-1"><img src="images/yuanbao@2x.png"><div class="money-1"></div><div class="mask"></div></td>
<td class="lottery-unit lottery-unit-2"><img src="images/hongbao@2x.png"><div class="money-2"></div><div class="mask"></div></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-7"><img src="images/qianbao03@2x.png"><div class="money-7"></div><div class="mask"></div></td>
<td>
<!-- <a href="#"></a>-->
<div id="btnClick"></div>
</td>
<td class="lottery-unit lottery-unit-3"><img src="images/qianbao02@2x.png"><div class="money-3"></div><div class="mask"></div></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-6"><img src="images/hongbao@2x.png"><div class="money-6"></div><div class="mask"></div></td>
<td class="lottery-unit lottery-unit-5"><img src="images/jinbi@2x.png"><div class="money-5"></div><div class="mask"></div></td>
<td class="lottery-unit lottery-unit-4"><img src="images/hongbao@2x.png"><div class="money-4"></div><div class="mask"></div></td>
</tr>
</table>
</div>
</div>- 转盘转动方法
function roll(){
lottery.times = 1;
lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
if (lottery.times > lottery.cycle 10 && lottery.prize==lottery.index 1) {
clearTimeout(lottery.timer);
lottery.prize=-1;
lottery.times=0;
lottery.stop();
// alert('恭喜您！获得' getPrizerUser.amount "元");
click=false;
}else{
if (lottery.times<lottery.cycle) {
lottery.speed -= 10;
}else if(lottery.times==lottery.cycle) {
lottery.prize = getPrizerUser.sort;
}else{
if (lottery.times > lottery.cycle 10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index 1)) {
lottery.speed = 110;
}else{
lottery.speed = 20;
}
}
if (lottery.speed<40) {
lottery.speed=40;
};
//console.log(lottery.times '^^^^^^' lottery.speed '^^^^^^^' lottery.prize);
lottery.timer = setTimeout(roll,lottery.speed);//循环调用
}
return false;
}3.将此抽奖网址集成在APP上 因为我们的需求是转盘抽奖用h5写，然后将此网址用APP加载，APP在加载时传入Token，后台在抽奖接口中判断此人积分是否可用抽奖，将抽奖结果回调给APP做弹框提示！
APP展示抽奖结果
三.说明 此抽奖参考文章：https://www.cnblogs.com/starof/p/4933907.html，因为用JQuery写的，本人知识匮乏，只能在此基础上修改成自己需要的。
