html:
.active{
background-color: #fffea5 !important;
}
.white_item{
background-color: #fff;
}
js:
data(){
index: 3, // 当前转动到哪个位置,起点位置
count: 8, // 总共有多少个位置
timer: 0, // 每次转动定时器
speed: 200, // 初始转动速度
times: 0, // 转动次数
cycle: 30, // 转动基本次数:即至少需要转动多少次再进入抽奖环节
prize: -1, // 中奖位置
}
goLottery(){
this.startRoll();
}
// 开始转动
startRoll () {
this.times += 1 // 转动次数
this.oneRoll() // 转动过程调用的每一次转动方法,这里是第一次调用初始化
this.usePrize()
},
// 每一次转动
oneRoll () {
let index = this.index // 当前转动到哪个位置
const count = 8 // 总共有多少个位置
index += 1
if (index > count - 1) {
index = 0
}
this.index = index
},
usePrize() {
// 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
if (this.times > this.cycle + 10 && this.prize === this.index) {
clearTimeout(this.timer) // 清除转动定时器,停止转动
this.times = 0
} else {
if (this.times < this.cycle) {
this.speed -= 5 // 加快转动速度
}
this.timer = setTimeout(this.startRoll, this.speed)
}
},