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)

          }

    },