1
2
3
4
5
6
7
8
9
10
11
12
13

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

1
2
3
4
5
6
7

*{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;}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

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