jquery九宫格抽奖转盘插件lottery

作者: 锦锦_jane | 来源:发表于2020-09-08 14:03 被阅读0次

最近遇到一个需求是让做一个抽奖转盘
上网查了一下，找到一个插件lottery.js，修改了一下，拿来用，感兴趣的可以看一下

要求：由前端随机产生奖品，最多一次抽到谢谢惠顾，每次奖品不能重复
抽奖示例

抽奖示例
主要的html结构

<ul class="lotteryList" id="lottery">
    <li class="item active lottery-unit lottery-unit-0">
        <img class="gift" src="./images/gift01.png" alt="">
        <img class="hot" src="./images/hot.png" alt="">
        <p class="giftTitle">iPhone 11 Pro</p>
    </li>
    <li class="item lottery-unit lottery-unit-1">
        <img class="gift" src="./images/gift02.png" alt="">
        <img class="hot" src="./images/hot.png" alt="">
        <p class="giftTitle">Au9999金条</p>
    </li>
    <li class="item lottery-unit lottery-unit-2">
        <img class="gift" src="./images/gift03.png" alt="">
        <p class="giftTitle">华为P40 Pro</p>
    </li>
    <li class="item lottery-unit lottery-unit-7">
        <img class="gift" src="./images/gift04.png" alt="">
        <p class="giftTitle">谢谢参与</p>
    </li>
    <li class="item luck draw-btn">
        <p class="luckNum">剩余次数：<span class="surplusNum"></span>次</p>
        <p class="luckTitle">开始抽奖</p>
        <img class="hand" src="./images/hand.png" alt="">
    </li>
    <li class="item lottery-unit lottery-unit-3">
        <img class="gift" src="./images/gift06.png" alt="">
        <p class="giftTitle">Redmi K30</p>
    </li>
    <li class="item lottery-unit lottery-unit-6">
        <img class="gift" src="./images/gift07.png" alt="">
        <p class="giftTitle">小米10</p>
    </li>
    <li class="item lottery-unit lottery-unit-5">
        <img class="gift" src="./images/gift08.png" alt="">
        <p class="giftTitle">T-shirt</p>
    </li>
    <li class="item lottery-unit lottery-unit-4">
        <img class="gift" src="./images/gift09.png" alt="">
        <img class="suggest" src="./images/suggest.png" alt="">
        <p class="giftTitle">黄金吊坠</p>
    </li>
</ul>

抽奖的js代码

// 创建抽奖对象
var lottery = {
    index: -1, //当前转动到哪个位置，起点位置
    count: 0, //总共有多少个位置
    timer: 0, //setTimeout的ID，用clearTimeout清除
    speed: 20, //初始转动速度
    times: 0, //转动次数
    cycle: 75, //转动基本次数：即至少需要转动多少次再进入抽奖环节
    prize: -1, //中奖位置
    lastCount: '3', //剩余的抽奖次数
    result: [], //中奖结果
    giftList: [0, 1, 2, 3, 4, 5, 6, 7], //奖品数组
    token: '1b19ffa260fa6c6e36ded3cafefbd4c5',
    init: function (id) {
        if ($('#' + id).find('.lottery-unit').length > 0) {
            $lottery = $('#' + id);
            $units = $lottery.find('.lottery-unit');
            this.obj = $lottery;
            this.count = $units.length;
            $lottery.find('.lottery-unit.lottery-unit-' + this.index).addClass('active');
            // console.log(this.count);
        };
    },
    roll: function () {
        var index = this.index;
        var count = this.count;
        var lottery = this.obj;
        $(lottery).find('.lottery-unit.lottery-unit-' + index).removeClass('active');
        index += 1;
        if (index >= count) {
            index = 0;
        };
        $(lottery).find('.lottery-unit.lottery-unit-' + index).addClass('active');
        this.index = index;
        return false;
    },
    stop: function (index) {
        this.prize = index;
        return false;
    },
    //这是中奖的请求
    hajax: function () {
        console.log('lottery.prize:' + lottery.prize);
        // $.ajax({
        //     type: 'post',
        //     url: '接口地址',
        //     data: { 数据 },
        //     dataType: 'json',
        //     success: function (res) {
        //     },
        //     error: function () {
        //     }
        // })
    }

};
//转圈方法
function roll() {
    lottery.times += 1;
    lottery.roll(); //转动过程调用的是lottery的roll方法，这里是第一次调用初始化

    if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
        clearTimeout(lottery.timer);
        setTimeout(function () {
            sprisein(lottery.prize) //弹出中奖盒子
            lottery.hajax(); //给后端发中奖记录
            lottery.prize = -1;
            lottery.times = 0;
            click = false;
        }, 500);

    } else {
        if (lottery.times < lottery.cycle) {
            lottery.speed -= 10;
        } else if (lottery.times == lottery.cycle) {
            var index = random(0, lottery.giftList.length - 1); //随机生成一个0-7之间的数字
            lottery.prize = lottery.giftList[index]; //最后产生的奖品序号
            lottery.giftList.splice(index, 1); //保证奖品唯一
            lottery.lastCount -= 1; //抽奖次数-1
            lottery.result.push(lottery.prize);//保存中奖结果
            console.log(lottery.result);
        } 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;
        };

        lottery.timer = setTimeout(roll, lottery.speed); //循环调用
    }
    return false;
}

// 生成随机数字
function random(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}

var click = false;//控制抽奖按钮是否响应
window.onload = function () {
    lottery.init('lottery'); //初始化抽奖对象
    $(".surplusNum").text(lottery.lastCount)
    $('.draw-btn').click(function () {
        if (lottery.lastCount > 0) {
            $(".surplusNum").text(lottery.lastCount - 1)
        } else {
            $(".surplusNum").text(lottery.lastCount)
        }
        if (lottery.lastCount == 0) {
            alert('您的抽奖机会已经用完')
        } else if (click) { //click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
            return false;
        } else {
            lottery.speed = 100;
            roll(); //转圈过程不响应click事件，会将click置为false
            click = true; //一次抽奖完成后，设置click为true，可继续抽奖
            return false;
        }
    });
};

//中奖盒子
function sprisein(sprisNum) {
    var gift = '',
        ifGift = sprisNum,
        giftUrl = '';

    if (ifGift == 0) {
        gift = 'iPhone 11 Pro';
        giftUrl = 'gift01';
    } else if (ifGift == 1) {
        gift = 'Au9999金条';
        giftUrl = 'gift02';
    } else if (ifGift == 2) {
        gift = '华为P40 Pro';
        giftUrl = 'gift03';
    } else if (ifGift == 3) {
        gift = 'Redmi K30';
        giftUrl = 'gift06';
    } else if (ifGift == 4) {
        gift = '黄金吊坠';
        giftUrl = 'gift09';
    } else if (ifGift == 5) {
        gift = 'T-shirt';
        giftUrl = 'gift08';
    } else if (ifGift == 6) {
        gift = '小米10';
        giftUrl = 'gift07';
    } else if (ifGift == 7) {
        gift = '谢谢惠顾';
        giftUrl = 'gift04';
    }
    // $('.surplusNum').text(lottery.lastCount);
    alert('获得' + gift)
}

css代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

.lotteryList {
    width: 579px;
    height: 579px;
    border: 6px solid #FFA91A;
    box-shadow: 0px 5px 3px 0px rgba(128, 9, 14, 0.58);
    border-radius: 24px;
    padding: 25px 20px 23px;
    margin: 40px auto;
}

.item {
    width: 161px;
    height: 161px;
    background: rgba(255, 182, 68, 0.1);
    border-radius: 10px;
    border: 3px solid rgba(255, 182, 68, .9);
    position: relative;
    margin-right: 22px;
    margin-bottom: 22px;
    padding-top: 8px;
    padding-left: 16px;
    float: left;
}

.item:nth-child(2) {
    margin-bottom: 0;
}

.item:nth-child(3) {
    margin-right: 0;
}

.item:nth-child(6) {
    margin-left: -4px;
    margin-right: 0;
}

.item:nth-child(7),
.item:nth-child(8),
.item:nth-child(9) {
    margin-top: -10px;
}

.item:nth-child(9) {
    margin-right: 0;
}

.gift {
    width: 122px;
    height: 122px;
    margin-bottom: 8px;
}

.giftTitle {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    background: #FFB644;
    border-radius: 3px 3px 6px 6px;
    font-weight: 400;
    color: #fff;
    text-align: center;
}

.item.active {
    background: rgba(229, 19, 40, 0.1);
    border: 3px solid #E51328;
}

.item.active .giftTitle {
    background: rgba(229, 19, 40, 1);
}

.hot {
    position: absolute;
    top: -10px;
    right: -12px;
    width: 70px;
    height: 70px;
}

.suggest {
    position: absolute;
    top: -14px;
    right: -10px;
    width: 63px;
    height: 70px;
}

.luck {
    width: 211px;
    height: 211px;
    background: url(./images/gift05.png) top center no-repeat;
    background-size: cover;
    border: none;
    margin: 0;
    padding-top: 40px;
    margin-left: -25px;
    margin-top: -24px;
    padding-left: 22px;
    cursor: pointer;
}

.luckNum {
    width: 166px;
    height: 30px;
    font-size: 16px;
    background: linear-gradient(90deg, rgba(255, 208, 95, .4), rgba(214, 65, 69, .4), rgba(255, 207, 98, .4));
    color: #FFFBEA;
    font-weight: 400;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.luckTitle {
    width: 166px;
    font-size: 28px;
    margin-top: 12px;
    font-weight: 800;
    color: #E34A0F;
    line-height: 1;
    text-align: center;
}

.hand {
    position: absolute;
    width: 72px;
    height: 80px;
    left: 72px;
    bottom: 34px;
    animation: updown 1s ease-in-out 1s infinite alternate;
}

@keyframes updown {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(15px);
    }
}

参考文章
jquery九宫格抽奖转盘插件lottery
jquery——九宫格大转盘抽奖

jquery九宫格抽奖转盘插件lottery

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读