生成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>