console
var app = new Vue({
el: '#app',
computed: {
t() {
return (this.time / 100).toFixed(2)
},
t1() {
return Math.floor(this.time / 1000)
},
t2() {
return Math.floor(this.time % 1000 / 100)
},
t3() {
return Math.floor(this.time % 100 / 10)
},
t4() {
return Math.floor(this.time % 10)
}
},
data: {
time: 0,
stop: false,
step:Number(1.111),
timespan: 1,
on: false,
},
methods: {
add() {
if (this.time >= 9999) this.time = 0;
this.time += this.step;
if (this.stop) return;
setTimeout(this.add, this.timespan);
}
},
mounted() {
this.add();
}
})
<div id="app">
<p>
增长步长:
<input type="number" v-model="step" style="width:50px" min="0.0" step="0.1"
/>
执行间隔:
<input type="number" v-model="timespan" style="width:50px" />
</p>
<p>
<button @click="(stop=false,time=0,add())">
开始
</button>
<button @click="stop=true">
停
</button>
</p>
<p>
{{t}}
</p>
<p>
{{t1}}-{{t2}}-{{t3}}-{{t4}}
</p>
<div>
<transition-group name="list" tag="span" class="list">
<div v-for="i in [0,1,2,3,4,5,6,7,8,9]" :key="i" class="list-item" v-if="t1==i">
{{i}}
</div>
</transition-group>
<transition-group name="list" tag="span" class="list">
<div v-for="i in [0,1,2,3,4,5,6,7,8,9]" :key="i" class="list-item" v-if="t2==i">
{{i}}
</div>
</transition-group>
<transition-group name="list" tag="span" class="list">
<div v-for="i in [0,1,2,3,4,5,6,7,8,9]" :key="i" class="list-item" v-if="t3==i">
{{i}}
</div>
</transition-group>
<transition-group name="list" tag="span" class="list">
<div v-for="i in [0,1,2,3,4,5,6,7,8,9]" :key="i" class="list-item" v-if="t4==i">
{{i}}
</div>
</transition-group>
</div>
</div>
.list {
display: inline-block;
}
.list-item {
position: absolute;
}
.list-enter-active,
.list-leave-active {
transition: all 0.1s;
}
.list-enter {
opacity: 0;
transform: translateY(-20px);
}
.list-leave-to {
opacity: 0;
transform: translateY(20px);
}