最近遇到一个需求是让做一个抽奖转盘
上网查了一下，找到一个插件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);
}
}
