利用CountUp.js 实现数字跳转效果

最新推荐文章于 2025-09-14 03:12:11 发布

原创最新推荐文章于 2025-09-14 03:12:11 发布 · 637 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript/JQuery 专栏收录该内容

22 篇文章

订阅专栏

本文介绍CountUp.js，一个用于数字动画显示的JavaScript库。它支持数字的平滑过渡和格式化，如分组、小数点和后缀设置。通过示例代码展示如何在网页上使用该库实现数字跳动效果。

在这里插入图片描述

countup.js

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script src="countup.js"></script>
</head>
<body>

<h2 id="number"></h2>

<script type="text/javascript">

   numberJump('number',123456,'km')

   function numberJump(elementId, target, suffix) {
       if (!$('#' + elementId).attr('data-src')) {
           $('#' + elementId).attr('data-src', 0);
       }

       var src = $('#' + elementId).attr('data-src');
       if (src == target) {
           return;
       }

       var options = {
           useEasing: true,
           useGrouping: true,
           separator: ',',
           decimal: '.',
           suffix: suffix || ''
       };
       var demo = new CountUp(elementId, src, target, 0, 4, options);
       demo.start();

       $('#' + elementId).attr('data-src', target);
   }
</script>

</body>

</html>

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="countup.js"></script>
</head>
<body>

<h2 id="number"></h2>

<script type="text/javascript">

    numberJump('number',123456,'km')

    function numberJump(elementId, target, suffix) {
        if (!$('#' + elementId).attr('data-src')) {
            $('#' + elementId).attr('data-src', 0);
        }

        var src = $('#' + elementId).attr('data-src');
        if (src == target) {
            return;
        }

        var options = {
            useEasing: true,
            useGrouping: true,
            separator: ',',
            decimal: '.',
            suffix: suffix || ''
        };
        var demo = new CountUp(elementId, src, target, 0, 4, options);
        demo.start();

        $('#' + elementId).attr('data-src', target);
    }
</script>

</body>

</html>

具体的其他参数和方法可以参照