jQuery九宫格跑马灯抽奖（已知结果）

最新推荐文章于 2023-05-25 10:19:26 发布

一朵叶子

最新推荐文章于 2023-05-25 10:19:26 发布

阅读量721

点赞数

文章标签： jquery 前端 css3

本文链接：https://blog.csdn.net/yjy528/article/details/127519050

版权

描述：
写两个抽奖，等级不同，找到一个原生写法的，原作者链接如下：

参考（

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;}