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)
}
},