vue九宫格抽奖功能

vue九宫格抽奖

页面结构

<div id="gift-box">
 <ul>
 <li :class="[index==0?'active':'']">一等奖</li>
 <li :class="[index==1?'active':'']">二等奖</li>
 <li :class="[index==2?'active':'']">三等奖</li>
 <li :class="[index==3?'active':'']">四等奖</li>
 <a :class="{cur:curshow}" @click="startRoll">开始</a>
 <li :class="[index==4?'active':'']">五等奖</li>
 <li :class="[index==5?'active':'']">六等奖</li>
 <li :class="[index==6?'active':'']">七等奖</li>
 <li :class="[index==7?'active':'']">八等奖</li>
 </ul>
</div>

样式

 *{margin:0;padding:0;}
 #gift-box{width:310px;height:310px;margin:30px auto;}
 ul{width:310px;height:310px;list-style:none;}
 ul li,ul a{width:100px;height:100px;border:1px solid #565656;float:left;text-align:center;line-height:100px;}
 ul a:hover{cursor:pointer;color:orange;font-size:18px;}
 ul .active{background:red;color:#fff;}
 .cur {background-color: #ccc;}

思路：点击开始抽奖，调用转动的方法，如果达到转动次数要求，且转到中奖位置，则停止，否则继续抽奖
js

data(){
    return{
       index: -1,// 当前转动到哪个位置，起点位置
       count: 8,//总共有多少位置
       timer: 0,//每次转动定时器
       speed: 200,//初始转动速度
       times: 0,// 转动次数
       cycle: 3,//转动基数：至少需要转动多少次再进入抽奖环节
       prize: 5,//中奖位置
    }
},
methods:{
     // 开始抽奖
       startRoll:function(){
           this.times+=1//转动次数
           this.oneRoll()// 转动过程调用的每一次转动方法，这里是第一次调用初始化
           this.usePrize()
       },
       // 转动的方法
       oneRoll:function(){
           let index = this.index //当前转动到的位置
           const count = 8 //总共的位置
           index += 1
           if(index >count - 1){
               index = 0
           }
           this.index = index
       },
       //判断是否转到中奖位置，如果是，停止，如果不是，继续转动
       usePrize:function(){
           // 判断是否达到转动次数要求且转到的位置是中奖位置
           if(this.times > this.cycle + 10 && this.prize === this.index) {
               clearTimeout(this.timer) //清除定时器，转动停止
               this.times = 0
               this.giftopen = true //显示开奖界面
               // alert('恭喜你，中奖了')
           }else {
               //否则继续转动
               if(this.times<this.cycle){
                   this.speed-=5
               }
               this.timer = setTimeout(this.startRoll, this.speed)
           }
       }
}