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">
  <numluck></numluck>
</div>
<script type="text/x-template" id="numLuck">
  <div class="num-luck">
    <div class="list">
      <span v-for="(item, index) in pos" class="num">
        <span class="num-list" :style="{top: '-'+item.top +'px'}">
          <span v-for="i in 10" class="num-item">{{i-1}}</span>
        </span>
      </span>
    </div>
    <button class="draw" @click="draw">抽奖</button>
  </div>
</script>

CSS

.num-luck{
  width: 600px;
  margin: 0 auto;
}
.list{
  width: 600px;
  margin: 20px auto;
}
.draw{
  width: 100px;
  height: 20px;
  display: block;
  margin: 0 auto;
  cursor: pointer;
}
.num{
  display: inline-block;
  box-sizing: border-box;
  position: relative;
  width: 150px;
  height: 200px;
  overflow: hidden;
  border: 1px solid #000;
}
.num-list{
  position: absolute;
  left: 0;
  display: block;
}
.num-item{
  text-align: center;
  width: 100%;
  line-height: 200px;
  font-size: 80px;
  font-weight: bolder;
  color: #333;
  display: inline-block;
}

JavaScript

Vue.component('numluck',{
  data:function() {
    var pos = [{top:0},{top:0},{top:0},{top:0}];
    return {
      pos:pos
    }
  },
  template:'#numLuck',
  methods:{
    draw :function(){
      var res =(''+Math.floor(Math.random()*10000)).split('');
      var self = this;
      res.forEach(function(e, i){
        var index = 0;
        var times = 50;
        var max = 200*9;
        var speed = 40;
        setTimeout(function cb(){
          index++;
          if(index==10){
            index = 0;
          }
          times--;
          self.pos[i].top>max?self.pos[i].top=0:self.pos[i].top+=100;
          //console.log(self.pos[i].top)
          if(times<=0&&e==index){
            self.pos[i].top = e*200;
            return;
          }
          setTimeout(cb, times<=10?(speed>=100?speed=100:speed+=10):speed);
        }, speed);
      });
    }
  }
});
new Vue({
	el:'#app',
  data:{}
})