Vue.component('blockluck',{ template:'#luck', data:function() { var luckList = [ { 'isPrize':false, 'desc':'谢谢参与' },{ 'isPrize':true, 'desc':'大蛇丸碎片一片' },{ 'isPrize':true, 'desc':'疾风传佐助整卡' },{ 'isPrize':true, 'desc':'128金币' },{ 'isPrize':false, 'desc':'谢谢参与' },{ 'isPrize':true, 'desc':'10金币' },{ 'isPrize':true, 'desc':'88金币' },{ 'isPrize':true, 'desc':'10忍玉' },{ 'isPrize':true, 'desc':'8888铜币' },{ 'isPrize':true, 'desc':'12888铜币' },{ 'isPrize':true, 'desc':'黄勾玉1个' },{ 'isPrize':true, 'desc':'水门碎片一片' } ], index = -1; return { index:index, luckList:luckList, clicked:false } }, methods:{ draw :function(){ if(this.clicked){ alert('已经抽过奖,请稍后重试~'); return; } var timer = null, times=40, speed=40, num = this.luckList.length, self = this, luckIndex = Math.floor(Math.random()*num), currentPrize = this.luckList[luckIndex]; this.clicked = true; timer = setTimeout(function cb(){ if(times<=0 && self.index==luckIndex){ if(currentPrize.isPrize){ alert('恭喜抽中:'+currentPrize.desc); }else{ alert('很遗憾,'+currentPrize.desc); } return; } //console.log('times:',times," index", self.index, " luck:",luckIndex) times--; self.index<num-1?self.index++:self.index=0; setTimeout(cb, times<=5?(speed>=400?speed=400:speed+=50):speed); },speed); } } }); new Vue({ el:'#app', data:{} })
<div id="app"> <blockluck></blockluck> </div> <script type="text/x-template" id="luck"> <div> <button @click="clicked=false">重置抽奖</button> <table class="block-luck"> <tr> <td :class="{active: index==0}">{{luckList[0].desc}}</td> <td :class="{active: index==1}">{{luckList[1].desc}}</td> <td :class="{active: index==2}">{{luckList[2].desc}}</td> <td :class="{active: index==3}">{{luckList[3].desc}}</td> </tr> <tr> <td :class="{active: index==11}">{{luckList[11].desc}}</td> <td colspan="2" rowspan="2" class="draw" :class="{'draw-disabled':clicked}" @click='draw'>点我抽奖</td> <td :class="{active: index==4}">{{luckList[4].desc}}</td> </tr> <tr> <td :class="{active: index==10}">{{luckList[10].desc}}</td> <td :class="{active: index==5}">{{luckList[5].desc}}</td> </tr> <tr> <td :class="{active: index==9}">{{luckList[9].desc}}</td> <td :class="{active: index==8}">{{luckList[8].desc}}</td> <td :class="{active: index==7}">{{luckList[7].desc}}</td> <td :class="{active: index==6}">{{luckList[6].desc}}</td> </tr> </table> </div> </script>
.block-luck{ width: 600px; margin: 20px auto; border-collapse: collapse; } .draw{ color:#eee; font-size: 30px; cursor: pointer; background: #FF6666; } .draw-disabled{ background: #eee; color: #fff; } td{ text-align: center; border: 1px solid #000; width: 100px; height: 100px; background: #CCFFCC; color: #333; } td.active{ background: #FF9966; color: #eee; }