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