生成gif后有点卡顿,实际上是很流畅的。
完整代码如下
DOM
<!DOCTYPE html><html><head><title></title><style type="text/css">#root{display: flex;justify-content: center;width: 50px;padding: 10px;font-size: 25px;font-weight: 600;border: 5px solid grey;border-radius: 20px;}</style></head><body><div id="root">0</div></body>
JS
start函数用于启动动画,roll函数是具体进行数字滚动的函数,它返回一个闭包用于存储变化的数组n(也就是实现的数字)。参数total是你所设置的最后停止的数字,step是你所希望的跳动的间隔。
start函数里面的runtime表示动画总共经历的时间,默认设置为1000ms,最小须大于等于300ms,避免动画过快看不清。
<script type="text/javascript">function roll(total, idname, step) {let n = 0;return function () {n = (n + step) >= total ? total : (n + step);if (n <= total) {document.getElementById(idname).innerHTML = n;}}}function start(index, idname, step, runtime = 1000){let rolling = roll(index, idname, step)runtime = (runtime >= 300) ? runtime : 1000;for (let i = 0; i < (index/step); i++) {let timer = setTimeout(rolling, (runtime/index)*i*step)}clearTimeout(timer);}start(100,'root', 4,)</script>