JS实现数值自动增加动画

最新推荐文章于 2025-07-04 11:52:26 发布

原创

最新推荐文章于 2025-07-04 11:52:26 发布 · 1.3w 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

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'), //要显示