js数字累加 · 递增动画 - 封装篇

最新推荐文章于 2024-06-14 17:23:32 发布

草巾冒小子

最新推荐文章于 2024-06-14 17:23:32 发布

阅读量2.5k

点赞数 2

分类专栏： JavaScript

原文链接：https://www.jb51.net/article/131701.htm

版权

JavaScript 专栏收录该内容

70 篇文章 2 订阅

订阅专栏

js数字累加 · 递增动画 - 代码可封装

代码如下：

<!DOCTYPE html> 
<html> 
 <head> 
	<meta charset="UTF-8"> 
	<title>数字自动增加</title> 
</head> 
<body>
	<p>
		<font size="5" id="time">0</font> 
		<font size="5" color="orangered">%</font>	
	</p>
	
<script src="jquery.min.3.1.0.js" type="text/javascript" charset="utf-8"></script>
<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); 
} 

// 调用函数，实现效果
var percet = 100; //分数或者百分比
NumAutoPlusAnimation("time", { 
    time: 1500, 
    num: percet, 
    regulator: 50 
}) 
</script> 
</body>
</html>

参考原文 ·

文章地址： JavaScript实现数值自动增加动画

以上就是关于“ js数字累加 · 递增动画 - 封装篇 ” 的全部内容。

草巾冒小子

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
js数字累加 · 递增动画 - 封装篇

js数字累加动画JavaScript实现数值自动增加动画代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>数字自动增加</title> </head> <body> &lt...
复制链接

扫一扫