一.效果图如下:
实现图
二.技术点实现
<!--效果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写的,本人知识匮乏,只能在此基础上修改成自己需要的。