1、效果图
2、代码(我用的vue3写的,vue2其实也一个道理)
<template>
<div class="nmber-animal">
<div class="number">{
{
numAnimal }}</div>
</div>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
onBeforeUnmount
} from 'vue'
let numAnimal = ref(396)
const roll = (total, step) => {
let n = 0;
return function () {
n = (n + step) >= total ? total : (n + step);
if (n <= total) {
numAnimal.value = n;
}
}
}
const start = (index, step, runtime = 1000) => {
let rolling = roll(index, step)
runtime = (runtime >= 300) ? runtime : 1000;
let timer = null
for (let i = 0; i < (index/step); i++) {
timer = setTimeout(rolling, (runtime/index)*i*step)
}
clearTimeout(timer);
}
start(numAnimal.value, 4)
</script>
<style lang="scss" scoped>
.nmber-animal {
display: flex;
align-items: center;
justify-content: center;
margin-top: 200px;
.number {
display: flex;
align-items: center;
justify-content: center;
padding: 70px 50px;
border: 1px solid #ccc;
border-radius: 20px;
box-shadow: 0 10px 8px rgba(0, 0, 0, .3);
font-size: 24px;
font-weight: bold;
}
}
</style>