Js实现数字动态滚动效果

最新推荐文章于 2024-03-19 08:00:00 发布

Sallywa

最新推荐文章于 2024-03-19 08:00:00 发布

阅读量1w

点赞数 3

本文链接：https://blog.csdn.net/sallywa/article/details/89671920

版权

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

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>

Sallywa

关注

3
点赞
踩
23

收藏

觉得还不错? 一键收藏
1
评论
Js实现数字动态滚动效果

生成gif后有点卡顿，实际上是很流畅的。完整代码如下DOM<!DOCTYPE html><html><head> <title></title> <style type="text/css"> #root{ display: flex; justify-content: center;...
复制链接

扫一扫