jquery.animateNumber.js 數字動畫效果

　　應要求  ，改個東西，需要的數字動畫效果網上搜了，都沒有滿足要求效果的現成插件，最后找到query.animateNumber.js。

　　需要的效果如圖：；

 

要求有分割符及小數位，但是query.animateNumber.js的演示效果只有：

兩種單獨的效果，怎樣把他們進行結合，達到自己需求的效果呢？

下面來看一下：

 

框住的部分其實就是能夠實現自定義樣式效果的方法，通過numberStep參數即可進行自定義的樣式開發。下面是實現需求效果的代碼：

 

$('#world-population').prop('number', 7000000000)
                    .animateNumber(
                        {
                            number: 7095217980.79,
                            numberStep: function(now, tween) {
                                var floored_number = Math.floor(now) / 7095217980.79;
                                    target = $(tween.elem);
                                if( floored_number >=1){
                                    floored_number=7095217980.79
                                }else {
                                    floored_number=now
                                }



                                var arr = floored_number.toFixed(2);
                                arr = arr.toString().split("");//將數據轉換成數組
                                console.log(arr)
                                var pointIndex = arr.indexOf(".");//找出小數點的索引值
                                // var renderData =[];//存儲要進行渲染的數組
                                // var splitArr =[];//存儲整數部分數組
                                var addSparator = Math.floor(pointIndex/3);//對整數部分添加分隔符進行判斷
                                var dataRemainder = (pointIndex % 3); //最大整數位不需添加分隔符
                                //分割數組，以期望的顯示形式進行分割
                                if(pointIndex > 3){
                                    if(dataRemainder){
                                        for(let i = 0; i < addSparator; i++){
                                            arr.splice(dataRemainder + 4*i,0,',')

                                        }
                                    }else {
                                        for(let i = 1; i < addSparator; i++){
                                            if(!i){
                                                arr.splice(dataRemainder + 4*i-1,0,'')
                                            }else {
                                                arr.splice(dataRemainder + 4*i-1,0,',')
                                            }

                                        }
                                    }
                                }
                                var html='';
                                for(var k=0;k<arr.length;k++){
                                    if(arr[k]===","){
                                        html +='<span class="sign">'+arr[k]+'</span>';
                                    }else {
                                        html +='<span class="number">'+arr[k]+'</span>';

                                    }

                                }


//                                floored_number.toString().animateNumber.numberStepFactories.separator(',')
//                                if (decimal_places > 0) {
                                    // force decimal places even if they are 0


                                    // replace '.' separator with ','
//                                            floored_number = floored_number.toString().replace('.', ',');
//                                }

                                target.html('￥' + html);
                            }
                        },
                        5000
                );

 

 當然  ，可以根據自己的需求進行自定義樣式開發，應該能夠滿足大多數的開發需求。