JS实现数值自动增加动画

最新推荐文章于 2024-05-19 21:18:03 发布

夏尔の

最新推荐文章于 2024-05-19 21:18:03 发布

阅读量1.2w

点赞数 10

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_16371909/article/details/78743588

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

JS实现数值自动增加动画，效果图如下：

话不多说，直接上代码，注释比较详细。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>数字自动增加</title>
	</head>

	<body>
		<h1 id="time">0</h1>

		<script>
			//数字自增到某一值动画参数（目标元素,自定义配置）
			function NumAutoPlusAnimation(targetEle, options) {

				/*可以自己改造下传入的参数，按照自己的需求和喜好封装该函数*/
				//不传配置就把它绑定在相应html元素的data-xxxx属性上吧
				options = options || {};

				var $this = document.getElementById(targetEle),
					time = options.time || $this.data('time'), //总时间--毫秒为单位
					finalNum = options.num || $this.data('value'), //要显示的真实数值
					regulator = options.regulator || 100, //调速器，改变regulator的数值可以调节数字改变的速度

					step = finalNum / (time / regulator),/*每30ms增加的数值--*/
					count = 0, //计数器
					initial = 0;

				var timer = setInterval(function() {

					count = count + step;

					if(count >= finalNum) {
						clearInterval(timer);
						count = finalNum;
					}
					//t未发生改变的话就直接返回
					//避免调用text函数，提高DOM性能
					var t = Math.floor(count);
					if(t == initial) return;

					initial = t;

					$this.innerHTML = initial;
				}, 30);
			}

			NumAutoPlusAnimation("time", {
				time: 1500,
				num: 12000,
				regulator: 50
			})
		</script>

	</body>

</html>

夏尔の

关注

10
点赞
踩
25

收藏

觉得还不错? 一键收藏
6
评论
JS实现数值自动增加动画

先放一张效果图，想要类似效果的小伙伴接着往下看话不多说，直接上代码，注释比较详细。数字自动增加 0 //数字自增到某一值动画参数（目标元素,自定义配置） function NumAutoPlusAnimation(targetEle, options) { /*可以自己改造下传入的参数，按照自己的需求和喜好封装该函数*
复制链接

扫一扫