实现效果：
模仿京东购物后的抽奖
思路：
点击立即抽奖，在随机时间内转盘停止转动，转盘隐藏
奖品dom展示，展示的奖励是在转盘中的8项奖励中随机取3个，展示出来
html结构：
<div class="lottery-container">
<div class="lottery-title-box">
<p class="lottery-title">下单抽抽乐</p>
<span class="lottery-subtitle">活动规则</span>
</div>
<div class="lottery-turntable">
<div class="turntable-item">
<img class="turntable-item-golden-bean" src="./assets/抽奖切图/金豆@2x.png" alt="">
<p>5金豆</p>
</div>
<div class="turntable-item">
<img class="turntable-item-coupon"
src="./assets/抽奖切图/quan@2x.png" alt="">
<p>理财满1000减50</p>
</div>
<div class="turntable-item">
<img class="turntable-item-red-packet" src="./assets/抽奖切图/hongbaomian@2x.png" alt="">
<p>1元流量红包</p>
</div>
<div class="turntable-item">
<img class="turntable-item-red-packet" src="./assets/抽奖切图/hongbaomian@2x.png" alt="">
<p>1元流量红包</p>
</div>
<div class="turntable-item turntable-item-instant-win">
<p class="turntable-item-text-instant-win">立即抽奖</p>
<img class="turntable-item-red-instant-win" src="./assets/抽奖切图/map-finger-full@2x.png" alt="">
</div>
<div class="turntable-item">
<img class="turntable-item-golden-bean" src="./assets/抽奖切图/金豆@2x.png" alt="">
<p>20金豆</p>
</div>
<div class="turntable-item">
<img class="turntable-item-golden-bean" src="./assets/抽奖切图/金豆@2x.png" alt="">
<p>20金豆</p>
</div>
<div class="turntable-item">
<img class="turntable-item-red-thanks" src="./assets/抽奖切图/很好-选中@2x.png" alt="">
<p>谢谢参与</p>
</div>
<div class="turntable-item">
<img class="turntable-item-coupon" src="./assets/抽奖切图/quan@2x.png" alt="">
<p>理财满1000减50</p>
</div>
</div>
<div class="lottery-turntable lottery-results" style="display: none;">
<p class="congratulation-sentence">
恭喜您，抽中3项奖励
</p>
<div class="lottery-results-content">
</div>
</div>
</div>
css：
.lottery-container{
border-radius: .133333rem;
width: 9.2rem;
height: 7.293333rem;
margin: 0 auto .346667rem;
background: #FFFFFF;
box-shadow: 0 .026667rem .266667rem 0 rgba(0,0,0,0.06);
.lottery-title-box{
width: 100%;
position: relative;
.lottery-title{
margin: 0 auto;
font-family: PingFangSC-Regular;
font-size: .426667rem;
color: #333333;
letter-spacing: 0;
text-align: center;
line-height: 1.226667rem;
}
.lottery-subtitle{
top: .44rem;
right: .373333rem;
position: absolute;
font-family: PingFangSC-Regular;
font-size: .293333rem;
color: #999999;
letter-spacing: 0;
}
}
.lottery-turntable{
display: flex;
flex-wrap: wrap;
.turntable-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2.8rem;
height: 1.706667rem;
margin-left: .2rem;
margin-bottom: .2rem;
background: #FCF8EC;
border: .013333rem solid rgba(255,232,191,0.56);
border-radius: .106667rem;
.turntable-item-golden-bean{
display: block;
width: .733333rem;
height: .733333rem;
margin-bottom: .133333rem;
}
.turntable-item-coupon{
display: block;
width: 1rem;
height: .68rem;
margin-bottom: .2rem;
position:relative;
top: .066667rem;
}
.turntable-item-red-packet{
display: block;
width: .613333rem;
height: .733333rem;
margin-bottom: .186667rem;
position: relative;
top: .08rem;
}
.turntable-item-red-thanks{
display: block;
width: .826667rem;
height: .826667rem;
margin-bottom: .106667rem;
}
.turntable-item-red-instant-win{
display: block;
width: .802667rem;
height: .802667rem;
margin-bottom: .133333rem;
}
p{
font-family: PingFangSC-Regular;
font-size: .293333rem;
color: #333333;
letter-spacing: 0;
text-align: center;
}
.turntable-item-text-instant-win{
font-family: PingFangSC-Semibold;
font-size: .426667rem;
color: #FFFFFF;
letter-spacing: 0;
text-align: center;
margin-top: .266667rem;
}
}
.turntable-item-instant-win{
background: linear-gradient(-180deg, #FD9882 0%, #F73B23 100%);
border-radius: .106667rem;
border-radius: .106667rem;
}
}
.lottery-results{
width: 8.8rem;
display: inherit;
height: 5.546667rem;
margin: 0 auto;
background: #FCF8EC;
border: 1px solid rgba(255,232,191,0.56);
border-radius: .106667rem;
.congratulation-sentence{
font-family: PingFangSC-Semibold;
font-size: .48rem;
color: #FD2103;
letter-spacing: 0;
text-align: center;
margin-top: .573333rem;
}
.lottery-results-content{
margin-top: .88rem;
display: flex;
justify-content: space-around;
.turntable-item{
margin-left: 0;
height: 2.666667rem;
border: transparent;
.immediately-to-receive{
width: 2.266667rem;
height: .826667rem;
margin-top: .48rem;
line-height: .826667rem;
background: #F73B23;
border-radius: .453333rem;
font-family: PingFangSC-Semibold;
font-size: .373333rem;
color: #FFFFFF;
letter-spacing: 0;
text-align: center;
}
}
}
}
}
js：
let indexArray = [0, 1, 2, 5, 8, 7, 6, 3]
let i = 0; //indexArray的下标
let curItem = 0; //用来储存当前的querySelectorAll
let timer = null //定时器
let rotateTime = 0 //转盘转动了多少时间
let rotateSwitchTime = 0 //转盘转动多少时间停下设置
let halfRotateSwitchTime=0 //转盘转动时间的中间值，在这个时间之前加速，在这个时间后减速
window.onload = function () {
// 转动时间控制数字
function random(min, max, flag) {
console.log(flag);
let curRandom = Math.floor(Math.random() * (max - min + 1) + min);
console.log('转盘转动curRandom秒后停下', curRandom);
if (curRandom === 4 && flag === 'prize') {
console.log(min, max, flag);
return random(min, max, flag)
} else {
console.log(curRandom);
return curRandom
}
}
//实现九宫格抽奖转盘转动
let turntableRotate = function (startTime) {
clearInterval(timer)
document.querySelectorAll('.turntable-item')[curItem].style.cssText = "border:none"
curItem = indexArray[i]
document.querySelectorAll('.turntable-item')[curItem].style.cssText = "border:3px solid red"
i++
if (i === indexArray.length) i = 0
// 统计转动时间
rotateTime += startTime
if (rotateTime < halfRotateSwitchTime) {
// 如果小于一半的停止时间halfRotateSwitchTime，那么就加速
startTime = startTime - 100
// 减速时间不能小于100，否则太快，影响效果
if (startTime === 0) startTime = 100
timer=setInterval(()=>turntableRotate(startTime), startTime)
} else if (rotateTime >= halfRotateSwitchTime && rotateTime < rotateSwitchTime) {
// 如果大于一半的停止时间halfRotateSwitchTime 且 小于 停止时间,那么就减速
startTime = startTime + 200
timer=setInterval(() => turntableRotate(startTime), startTime)
} else if (rotateTime >= rotateSwitchTime) {
// 当大于等于 停止时间时，就停止下来
console.log('转动的时间', rotateTime);
clearInterval(timer)
// 准备抽中奖品Dom
let lotteryResultsContent = document.querySelector('.lottery-results-content')
//追加奖品
for (k = 0; k < 3; k++) {
let CurPrizeItem = winPrize()
console.log('此时的prizeItem', CurPrizeItem);
CurPrizeItem.style.border = '1px solid transparent'
lotteryResultsContent.appendChild(CurPrizeItem)
}
console.log('抽中的三个商品', lotteryResultsContent);
// 抽奖转盘隐藏
document.querySelector('.lottery-turntable').style.display = 'none'
// 抽中奖品显示
document.querySelector('.lottery-results').style.display = 'block'
}
}
// 中奖商品展示Item
function winPrize() {
let prizeOne = random(0, 8, 'prize')
let prizeItem = document.querySelectorAll('.turntable-item')[prizeOne].cloneNode(true)
let p = document.createElement('p')
p.innerText = '立即领取'
p.className = 'immediately-to-receive'
prizeItem.appendChild(p)
return prizeItem
}
//抽奖点击事件
document.querySelector('.turntable-item-instant-win').onclick = function instantWin() {
// 移除点击事件，防止持续点击
document.querySelector('.turntable-item-instant-win').onclick = null
// 通过随机数设置转盘转动多少时间停下
rotateSwitchTime = random(3, 7) * 1000
console.log('停止转动的时间', rotateSwitchTime);
// console.log('rotateSwitchTime',rotateSwitchTime);
//转动时间控制中间数 前半段时间加速，后半段时间减速
halfRotateSwitchTime = parseInt(rotateSwitchTime / 2)
// console.log('halfRotateSwitchTime', halfRotateSwitchTime);
// 初始的定时器的s数为1000
timer = setInterval(() => turntableRotate(400), 400)
}
}
