好用的jquery.animateNumber.js数字动画插件

最新推荐文章于 2024-04-18 09:42:32 发布

weixin_34168700

最新推荐文章于 2024-04-18 09:42:32 发布

阅读量339

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tnnyang/p/8125609.html

版权

在做公司的运营报告页面时，有一个数字累计增加的动画效果，一开始，毫无头绪，不知如何下手，于是上网查资料，发现大多都是用的插件来实现的，那么今天，我也来用插件jquery.animateNumber.js来实现一个不一样的数字动画效果吧，也等于是做个笔记吧。代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
*{margin:0;padding:0;}
.platform_data{color:#e24f48;font-size:26px;margin-left:50px;}
.f_size {color:#2d3e50;font-size:18px;}
</style>
</head>
<body>
<p><label class="platform_data" id="income_money"></label><span class="f_size">元</span></p>
<p><label class="platform_data" id="income_num"></label><span class="f_size">笔</span></p>
<p><label class="platform_data" id="income_day"></label><span class="f_size">天</span></p>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.animateNumber.js"></script>
<script>
    /**
     * 格式化金额-中文
     * @param s
     * @param n
     */
    function fmoneyCN(s,n){
        n = n >= 0 && n <= 20 ? n : 2;
        s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";   //精度
        var l = s.split(".")[0].split(""),
            r = s.split(".")[1],  //remind
                t = "";
        var CN_TEN_THOUSAND = "<span class='f_size'>万</span>";
        var CN_HUNDRED_MILLION = "<span class='f_size'>亿</span>";

        if(l.length < 5){
            return s;
        }

        for(i = 0; i < l.length; i ++ )
        {
            if(i == (l.length - 9)){
                t += l[i] + CN_HUNDRED_MILLION + "";
            }else if( i == (l.length - 5)){
                t += l[i] + CN_TEN_THOUSAND + "";
            }else {
                t += l[i];
            }
        }
        return t.split("").join("");
    }

    $('#income_money').animateNumber({
        number: "901394152" ,
        numberStep: function(now, tween) {
            var target = $(tween.elem);
            target.prop('number', now).html(fmoneyCN(now,0));
        }
    },3000);

    $('#income_num').animateNumber({
        number: "47007" ,
        numberStep: function(now, tween) {
            var target = $(tween.elem);
            target.prop('number', now).html(fmoneyCN(now,0));
        }
    },3000);

    $('#income_day').animateNumber({
        number: "1200" ,
        numberStep: function(now, tween) {
            var target = $(tween.elem);
            target.prop('number', now).html(fmoneyCN(now,0));
        }
    },3000);
</script>
</body>
</html>

最终效果如下图：

源代码下载案例:
好用的jquery.animateNumber.js数字动画插件

转载于:https://www.cnblogs.com/tnnyang/p/8125609.html

weixin_34168700

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
好用的jquery.animateNumber.js数字动画插件

在做公司的运营报告页面时，有一个数字累计增加的动画效果，一开始，毫无头绪，不知如何下手，于是上网查资料，发现大多都是用的插件来实现的，那么今天，我也来用插件jquery.animateNumber.js来实现一个不一样的数字动画效果吧，也等于是做个笔记吧。代码如下：<!DOCTYPE html><html><head><meta charset="...
复制链接

扫一扫