https://seazen.com.cn/js/countUp.js

1// 数字动画插件
2(function($) {
3    $.fn.countUp = function(options) {
4        var settings = $.extend({
5            duration: 2000,
6            easing: 'swing',
7            decimals: 0,
8            prefix: '',
9            suffix: '',
10            useCommas: false // 添加是否使用千分位分隔符的选项
11        }, options);
12        
13        return this.each(function() {
14            var $this = $(this);
15            var countTo = $this.attr('data-count');
16            
17            if (!countTo) return;
18            
19            var decimals = settings.decimals;
20            var decimalFactor = Math.pow(10, decimals);
21            
22            $({countNum: 0}).animate({countNum: parseFloat(countTo.replace(/,/g, ''))}, {
23                duration: settings.duration,
24                easing: settings.easing,
25                step: function() {
26                    requestAnimationFrame(function() {
27                        var nums = Math.round(this.countNum * decimalFactor) / decimalFactor;
28                        if (decimals > 0) {
29                            nums = nums.toFixed(decimals);
30                        } else {
31                            nums = Math.round(nums);
32                        }
33                        // 根据设置决定是否添加千分位分隔符
34                        if (settings.useCommas) {
35                            nums = formatNumberWithCommas(nums);
36                        }
37                        $this.text(settings.prefix + nums + settings.suffix);
38                    }.bind(this));
39                },
40                complete: function() {
41                    requestAnimationFrame(function() {
42                        var nums = Math.round(this.countNum * decimalFactor) / decimalFactor;
43                        if (decimals > 0) {
44                            nums = nums.toFixed(decimals);
45                        } else {
46                            nums = Math.round(nums);
47                        }
48                        // 根据设置决定是否添加千分位分隔符
49                        if (settings.useCommas) {
50                            nums = formatNumberWithCommas(nums);
51                        }
52                        $this.text(settings.prefix + nums + settings.suffix);
53                    }.bind(this));
54                }
55            });
56        });
57    };
58})(jQuery);
59
60// 初始化数字动画
61$(document).ready(function() {
62    // 检查元素是否在视口中
63    function isElementInViewport(el) {
64        var rect = el.getBoundingClientRect();
65        return (
66            rect.top >= 0 &&
67            rect.left >= 0 &&
68            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
69            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
70        );
71    }
72    
73    // 获取数字的小数位数（处理包含逗号的数字）
74    function getDecimalCount(numStr) {
75        // 移除千位分隔符
76        var cleanNum = numStr.replace(/,/g, '');
77        var num = parseFloat(cleanNum);
78        var str = num.toString();
79        if (str.indexOf('.') !== -1) {
80            return str.split('.')[1].length;
81        }
82        return 0;
83    }
84    
85    // 解析包含千位分隔符的数字
86    function parseFormattedNumber(numStr) {
87        // 移除千位分隔符并转换为浮点数
88        return parseFloat(numStr.replace(/,/g, ''));
89    }
90    
91    // 格式化数字添加千位分隔符（根据需求决定是否使用）
92    function formatNumberWithCommas(num) {
93        // 只有当明确需要时才添加千分位分隔符
94        var parts = num.toString().split('.');
95        var integerPart = parts[0];
96        var decimalPart = parts[1] || '';
97        
98        // 添加千位分隔符
99        integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
100        
101        return decimalPart ? integerPart + '.' + decimalPart : integerPart;
102    }
103    
104    // 数字动画初始化函数
105    function initCountUp() {
106        $('.enfont[data-count]:not([data-count-processed])').each(function() {
107            var $this = $(this);
108            $this.attr('data-count-processed', 'true');
109            var originalText = $this.text();
110            $this.text('0');
111        });
112    }
113    
114    // 执行数字动画 - 不自动添加千分位分隔符
115    function runCountUp() {
116        $('.enfont[data-count]').each(function() {
117            var $this = $(this);
118            if (isElementInViewport(this) && !$this.hasClass('counted')) {
119                var countToStr = $this.attr('data-count');
120                var countTo = parseFormattedNumber(countToStr);
121                
122                if (!isNaN(countTo)) {
123                    $this.addClass('counted');
124                    
125                    // 根据data-count属性值的小数位数来决定decimals参数
126                    var decimalCount = getDecimalCount(countToStr);
127                    
128                    // 使用自定义动画而不是插件
129                    var decimals = decimalCount;
130                    var decimalFactor = Math.pow(10, decimals);
131                    
132                    $({countNum: 0}).animate({countNum: countTo}, {
133                        duration: 2000,
134                        easing: 'swing',
135                        step: function() {
136                            var currentNum = Math.round(this.countNum * decimalFactor) / decimalFactor;
137                            if (decimals > 0) {
138                                currentNum = currentNum.toFixed(decimals);
139                            } else {
140                                currentNum = Math.round(currentNum);
141                            }
142                            // 不自动添加千分位分隔符
143                            $this.text(currentNum);
144                        },
145                        complete: function() {
146                            var finalNum = Math.round(this.countNum * decimalFactor) / decimalFactor;
147                            if (decimals > 0) {
148                                finalNum = finalNum.toFixed(decimals);
149                            } else {
150                                finalNum = Math.round(finalNum);
151                            }
152                            // 不自动添加千分位分隔符，保持原始格式
153                            $this.text(finalNum);
154                        }
155                    });
156                }
157            }
158        });
159    }
160    
161    // 初始化

162    initCountUp();
163    
164    // 页面加载完成后执行
165    requestAnimationFrame(function() {
166        runCountUp();
167    });
168    
169    // 滚动监听
170    $(window).on('scroll', function() {
171        requestAnimationFrame(function() {
172            runCountUp();
173        });
174    });
175    
176    // 窗口大小改变监听
177    $(window).on('resize', function() {
178        requestAnimationFrame(function() {
179            runCountUp();
180        });
181    });
182});