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)

          }

    },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM