vue九宫格抽奖功能

vue九宫格抽奖

页面结构

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

思路：点击开始抽奖，调用转动的方法，如果达到转动次数要求，且转到中奖位置，则停止，否则继续抽奖
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<this.cycle){ this.speed-=5 } this.timer = setTimeout(this.startRoll, this.speed) } } }