vue -- 九宫格抽奖

html：

<div class="line_item" :class="index == 1 ? 'active' : 'white_item'">

<div>有礼</div>

</div>

<div class="line_item" :class="index == 2 ? 'active' : 'white_item'">

<div>一等奖</div>

</div>

<div class="line_item" :class="index == 3 ? 'active' : 'white_item'">

<div>谢谢参与</div>

</div>

<div class="line_item" :class="index == 0 ? 'active' : 'white_item'">

<div>特等奖</div>

</div>

<div class="line_item" @click="goLottery()">

立即抽奖

</div>

<div class="line_item" :class="index == 4 ? 'active' : 'white_item'">

<div>二等奖</div>

</div>

<div class="line_item" :class="index == 7 ? 'active' : 'white_item'">

<div>谢谢参与</div>

</div>

<div class="line_item" :class="index == 6 ? 'active' : 'white_item'">

<div>三等奖</div>

</div>

<div class="line_item" :class="index == 5 ? 'active' : 'white_item'">

<div>有礼</div>

</div>

 

css:

.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)

}

},