vue九宮格抽選機能

vue九宮格抽選
ページ構造

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

 

 
   
 
   
 
   
 
   
 スタート
 
   
 
   
 
   
 
   
 

スタイル

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

考え方:クリックして抽選を開始し、回転の方法を呼び出し、回転回数の要求に達し、当選位置に移動したら停止し、そうでなければ抽選jsを継続する

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