js-数字渐增到指定的数字,在指定的时间内完成(有动画效果哦)插件jquery.animateNumber.js

本来在项目中我自己实现的效果是数字由0渐增到指定的数字就好。

但是,最终效果不理想!

Why?

最终指定的数字太大了,TMMD,滚动好久就不到,那用户想看自己有多少钱了,那不是就一直等着!!!所以这个效果OUT!

改变思路

需求:在规定的时间内,实现数字由:初始值滚动到指定的数字

找到一个动画插件:jquery.animateNumber.js

 

html:

<span id="bmikece" style="font-size: 35px;"><%=user.available_predeposit %></span>     //后台绑定的最终需显示的数据

 

js:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.animateNumber.js"></script>        //需引用的插件基于js

//调用numCount()
     numCount();

//数字递增效果
    function numCount() {
            //小数点位允许多少
               var decimal_places = 2;
               var decimal_factor = decimal_places === 0 ? 1 : Math.pow(10, decimal_places);
               $('#bmikece')
                   .animateNumber(
                   {
                         number: (<%=user.available_predeposit %>) * decimal_factor,

                         numberStep: function(now, tween) {
                                  var floored_number = Math.floor(now) / decimal_factor,
                                        target = $(tween.elem);

                                   if (decimal_places > 0) {
                                        //强迫小数点,即使它们是0。
                                       floored_number = floored_number.toFixed(decimal_places);

                                      //用','替换'分隔符'
                                       floored_number = floored_number.toString().replace('.', '.');
                                }
                                 target.text(floored_number);
                        }
            },2000);
}

 

 

最终的效果还是不错的(笑脸)

posted @ 2018-04-26 09:40  MiniDuck  阅读(6123)  评论(0编辑  收藏  举报