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

Posted 2020-11-01 YAZI

本来在项目中我自己实现的效果是数字由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);
}

 

 

最终的效果还是不错的（笑脸）