描述:
写两个抽奖,等级不同,找到一个原生写法的,原作者链接如下:
参考(
https://www.cnblogs.com/yangqing22/p/14065754.html
)
略改了一下,换成了jQuery方式
优化点:在抽奖过程中,禁止重复点击抽奖按钮,写了一个空弹窗禁止切换两个tab,抽奖结束后放开
效果:
html:
<div class="draw_box">
<ul class="draw_tab">
<li class="cursorNeed nav_on" onclick="tabBoxNav(this,1)">普通</li>
<li class="cursorNeed" onclick="tabBoxNav(this,2)">高级</li>
</ul>
<table id="tb0" class="drawContent drawContent1">
<tr>
<td>
<p class="draw_giftName">礼物1</p>
</td>
<td>
<p class="draw_giftName">礼物2</p>
</td>
<td>
<p class="draw_giftName">礼物3</p>
</td>
</tr>
<tr>
<td>
<p class="draw_giftName">礼物4</p>
</td>
<td class="startBtn startAfter" onclick="StartGame(0)">开始</td>
<td>
<p class="draw_giftName">礼物5</p>
</td>
</tr>
<tr>
<td>
<p class="draw_giftName">礼物6</p>
</td>
<td>
<p class="draw_giftName">礼物7</p>
</td>
<td>
<p class="draw_giftName">礼物8</p>
</td>
</tr>
</table>
<table id="tb1" class="drawContent drawContent2 hide">
<tr>
<td>
<p class="draw_giftName">礼物11</p>
</td>
<td>
<p class="draw_giftName">礼物22</p>
</td>
<td>
<p class="draw_giftName">礼物33</p>
</td>
</tr>
<tr>
<td>
<p class="draw_giftName">礼物44</p>
</td>
<td class="startBtn startAfter" onclick="StartGame(1)">开始</td></td>
<td>
<p class="draw_giftName">礼物55</p>
</td>
</tr>
<tr>
<td>
<p class="draw_giftName">礼物66</p>
</td>
<td>
<p class="draw_giftName">礼物77</p>
</td>
<td>
<p class="draw_giftName">礼物88</p>
</td>
</tr>
</table>
</div>
<!-- 抽奖弹窗普通 -->
<div class = "popup_con hide" id = "draw_MainCon0">
<div class = "draw_popup_main1">
<div class="draw_popup_div">
<p class = "draw_popup_name" id="draw_popup_name0"></p>
<p class = "draw_popup_btn" onclick="$('#draw_MainCon0').hide();StartGame(0)">再抽一次</p>
</div>
</div>
</div>
<!-- 抽奖弹窗高级 -->
<div class = "popup_con hide" id = "draw_MainCon1">
<div class = "draw_popup_main1">
<div class = "draw_popup_div">
<p class = "draw_popup_name" id="draw_popup_name1"></p>
<p class = "draw_popup_btn" onclick="$('#draw_MainCon1').hide();StartGame(1)">再抽一次</p>
</div>
</div>
</div>
<!-- 空的弹窗 -->
<div class = "popup_con2 hide" id="blank_pop"></div>
js:
弹窗可以点击其他地方关闭,可以直接再抽一次
通过已知结果的id,找到其对应的td位置
//切换
function tabBoxNav(x,type){
$(x).addClass("nav_on").siblings().removeClass("nav_on");
if(type == 2){
$('#tb1').show().siblings('#tb0').hide();
}else{
$('#tb0').show().siblings('#tb1').hide();
}
}
// 点击其他区域关闭弹窗
$(document).click(function(e){
var _con = $('.draw_popup_div'); // 设置目标区域</span>
if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1\
$("#draw_MainCon0,#draw_MainCon1").hide();
}
});
// 抽奖部分
var index = 0, //当前亮区位置
prevIndex = 0, //前一位置
Speed = 150, //初始速度
Time, //定义对象
arr = GetSide(3, 3), //初始化数组 并获得礼物位置索引
EndIndex = 0, //决定在哪一格变慢
cycle = 0, //转动圈数
EndCycle = 0, //计算圈数
flag = false, //结束转动标志
quick = 0; //加速
var endChecked = 0; //结束在哪个
var drawFlag = false;
var drawGift = {};
var indexBox = 0;//抽的是哪个等级
function StartGame(type) {
indexBox = type;
if (drawFlag == false) {
cycle = 0;
flag = false;//转动结束
EndCycle = 1;
drawFlag = true;
// 接口请求到 抽中礼物数据
var data = {
"msg": {
"giftId": 3,
},
"code": 1
}
var code = data.code;//1--领取成功
drawGift = {};
if(code == 1){
$("#blank_pop").show();
endChecked = funcGetDrawNum(data.msg.giftId);//取礼物位置
Time = setInterval(Star, Speed);
drawGift = data.msg;
//刷新
}else{
tankuang(data.msg);
drawFlag = false
}
}
}
function Star() {
//跑马灯变速
if(flag == false) {
//走4格开始加速
if(quick == 4) {
clearInterval(Time);
Speed = 50;
Time = setInterval(Star, Speed);
}
// ajax 确定中奖项
// endChecked = 0//0-7
EndIndex = Math.floor(Math.random()*5);
//跑N圈减速
// console.log(cycle+'---'+EndCycle)
//最少跑两圈 不能停的太快 等不到后台返回值
if(cycle>2 && index == endChecked+1) {
clearInterval(Time);
Speed = 250;
flag = true; //触发结束
Time = setInterval(Star, Speed);
}
}
if(index >= arr.length) {
index = 0;
cycle++;
}
//结束转动并选中号码
if(flag == true && index == endChecked) {
quick = 0;
clearInterval(Time);
setTimeout(function () {
$("#blank_pop").hide();
console.log("结束了,出结果")
drawFlag = false;
$("#draw_popup_name" + indexBox).html("抽到礼物下标" + endChecked);
$("#draw_MainCon" + indexBox).show();
// 展示结果弹窗
}, 900)
}
$("#tb" + indexBox).find("tr").eq(arr[index][0]).find("td").eq(arr[index][1]).attr("class","act")
if(index > 0)
prevIndex = index - 1;
else {
prevIndex = arr.length - 1;
}
$("#tb" + indexBox).find("tr").eq(arr[prevIndex][0]).find("td").eq(arr[prevIndex][1]).attr("class","")
index++;
quick++;
}
// 获取抽奖盘礼物位置
function funcGetDrawNum(giftId){
switch(giftId){
case 1: case 11:
return 0;
break;
case 2: case 22:
return 1;
break;
case 3: case 33:
return 2;
break;
case 4: case 44:
return 3;
break;
case 5: case 55:
return 4;
break;
case 6: case 66:
return 5;
break;
case 7: case 77:
return 6;
break;
case 8: case 88:
return 7;
break;
default:
return 0;
break;
}
}
//跑马灯 数组列表
function GetSide(m, n) {
//初始化数组
var arr = [];
for(var i = 0; i < m; i++) {
arr.push([]);
for(var j = 0; j < n; j++) {
arr[i][j] = i * n + j;
}
}
//获取数组最外圈
var resultArr = [];
var tempX = 0,
tempY = 0,
direction = "Along",
count = 0;
while(tempX >= 0 && tempX < n && tempY >= 0 && tempY < m && count < m * n) {
count++;
resultArr.push([tempY, tempX]);
if(direction == "Along") {
if(tempX == n - 1)
tempY++;
else
tempX++;
if(tempX == n - 1 && tempY == m - 1)
direction = "Inverse"
} else {
if(tempX == 0)
tempY--;
else
tempX--;
if(tempX == 0 && tempY == 0)
break;
}
}
return resultArr;
}
css:
/* 抽奖部分 */
.hide{display:none}
.draw_main{width:689px;height: 719px;margin: 0 auto;position: relative;}
.draw_tab{width: 100%;height: 66px;background: #fffab1;}
.draw_tab li{width: 50%;float: left;height:66px;font-size:32px;color:#613eb3;line-height:70px;text-align:center;}
.draw_tab li.nav_on{color:#804b32;}
.drawContent{width: 523px;height: 522px;margin:10px auto;}
.drawContent td{width: 170px;height: 170px;background:#5726ff;position: relative;}
.drawContent tr:nth-child(1) td:nth-child(3){background:#7500d8;position: relative;}
.drawContent td.act::after{content: "";display: block;width: 170px;height: 170px;position: absolute;top: 1px;left: 1px;background:#46a8f9;opacity: 0.8;}
.drawContent td.startBtn{background:#e4e7fe;line-height: 170px;text-align: center;font-size: 50px;}
.drawContent td.startAfter{background:#8741e8;}
.drawContent2 td.startBtn{background:#fffab1;}
.drawContent2 td.startAfter{background:#ffd88d;}
.draw_giftName{height: 0.6rem;text-align: center;color: #fff;font-size: 0.2rem;}
/* 抽奖弹窗 */
.popup_con {position: fixed;width: 100%;height: 100%;z-index: 999;margin: auto;left: 0;top: 0;bottom: 0;right: 0;background: rgba(0,0,0,0.5);}
.draw_popup_main1{width: 500px;height: 150px;background:#fff;position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.draw_popup_name{color: #7500d8;font-size: 30px;text-align: center;line-height: 60px;}
.draw_popup_btn{width: 216px;height: 40px;line-height: 40px;text-align: center; margin: 0 auto;background:#fffab1;}
/* 空弹窗 */
.popup_con2 {position: fixed;width: 100%;height: 100%;z-index: 999;margin: auto;left: 0;top: 0;bottom: 0;right: 0;}