JSFiddle - React, Tailwind, and code Playground

by dont27

HTML

<script src="//cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
<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>

CSS

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

JavaScript

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