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);
}

 

 

最終的效果還是不錯的（笑臉）