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