可以加一些复杂样式的数字动画

效果图：

需引入的 JS

;(function($, window, document, undefined) {var leoTextAnimate = function(eles, opts) {this.element = $(eles);
        this.string = $(eles).html();
        this.defaults = {
            speed: 1000,
            autorun: true,
            delay: 0,
            fixed: '',
            start: ''
        };
        this.options = $.extend({}, this.defaults, opts);
        this.height = $(eles).height();}
    leoTextAnimate.prototype = {init: function() {if (this.element.find('.TextAnimate').length <= 0) {var html = method.getHtml(this.options, this.string);
                this.element.html(html);
            }
            this.reset();
            if (this.options.autorun) {if (this.options.delay == 0) {this.run();
                } else {
                    var $this = this;
                    setTimeout(function() {$this.run();
                    },
                    this.options.delay);
                }
            }
        },
        reset: function() {var $this = this.element.find('.TextAnimate');
            $this.css({
                'overflow': 'hidden',
                'display':'inline-block',
                'vertical-align':'top',
                'height': this.height
            }).find("span").css({
                'display': 'inline-block',
                'vertical-align': 'top',
                'position': 'relative',
                'top': '0px',
                'transform': 'translateY(0px)',
                '-ms-transform': 'translateY(0px)',
                '-moz-transform': 'translateY(0px)',
                '-webkit-transform': 'translateY(0px)',
                '-o-transform': 'translateY(0px)',
                '-ms-transition': '0s',
                '-moz-transition': '0s',
                '-webkit-transition': '0s',
                '-o-transition': '0s',
                'transition': '0s'
            }).find("i").css({
                'display': 'block',
                'font-style': 'normal',
                'height': this.height
            });
        },
        run: function() {
            var speed = this.options.speed;
            var height = this.height;
            this.reset();
            this.element.find("span").each(function() {var $this = $(this);
                var length = $this.find('i').index($this.find('.on'));
                var to = -length * height + 'px';
                if (to != $this.css("top")) {if (!window.applicationCache) {
                        $this.animate({top: to},
                        speed);
                    } else {
                        $this.css({'transform': 'translateY(' + to + ')',
                            '-ms-transform': 'translateY(' + to + ')',
                            '-moz-transform': 'translateY(' + to + ')',
                            '-webkit-transform': 'translateY(' + to + ')',
                            '-o-transform': 'translateY(' + to + ')',
                            '-ms-transition': speed / 1000 + 's',
                            '-moz-transition': speed / 1000 + 's',
                            '-webkit-transition': speed / 1000 + 's',
                            '-o-transition': speed / 1000 + 's',
                            'transition': speed / 1000 + 's'
                        });
                    }
                }
            });
        }
    }
    var method = {getNumber: function(options, string) {if(!this.inArr(options.fixed, string)) {
                var text = '<span>';
                if (options.start !== '') {text += '<i>' + options.start + '</i>';}
                for (var i = 0; i < 10; i++) {text += '<i' + (i == string ? 'class="on"':'') + '>' + i + '</i>';
                }
                return text + '</span>';
            } else {return '<span><i class="on">' + string + '</i></span>';}
        },
        getLowerCase: function(options, string, code) {if (!this.inArr(options.fixed, string)) {
                var text = '<span>';
                if (options.start !== '') {text += '<i>' + options.start + '</i>';}
                for (var i = 0; i < 26; i++) {text += '<i' + (97 + i == code ? 'class="on"':'') + '>' + String.fromCharCode(97 + i) + '</i>';
                }
                return text + '</span>';
            } else {return '<span><i class="on">' + string + '</i></span>';}
        },
        getUpperCase: function(options, string, code) {if (!this.inArr(options.fixed, string)) {
                var text = '<span>';
                if (options.start !== '') {text += '<i>' + options.start + '</i>';}
                for (var i = 0; i < 26; i++) {text += '<i' + (65 + i == code ? 'class="on"':'') + '>' + String.fromCharCode(65 + i) + '</i>';
                }
                return text + '</span>';
            } else {return '<span><i class="on">' + string + '</i></span>';}
        },
        getUnicode: function(options, string, code) {if (!this.inArr(options.fixed, string)) {
                var text = '<span>';
                if (options.start !== '') {text += '<i class="spot">' + options.start + '</i>';}
                for (var i = (code - this.getRand(2, 7)); i < (code + this.getRand(3, 10)); i++) {text += '<i' + (i == code ? 'class="on spot"':'') + '>' + String.fromCharCode(i) + '</i>';
                }
                return text + '</span>';
            } else {return '<span><i class="on spot">' + string + '</i></span>';}
        },
        getHtml: function(options, string) {
            var html = '<div class="TextAnimate">'
            for (var i = 0; i < string.length; i++) {var text = string.substr(i, 1);
                var code = text.charCodeAt();
                if (code > 47 && code < 58) {html += this.getNumber(options, text);
                } else if (code > 64 && code < 91) {html += this.getUpperCase(options, text, code);
                } else if (code > 96 && code < 123) {html += this.getLowerCase(options, text, code);
                } else {html += this.getUnicode(options, text, code);
                }
            }
            return html + '</div>';
        },
        getRand: function(minnum, maxnum) {return Math.floor(minnum + Math.random() * (maxnum - minnum));
        },
        inArr: function(arr,str){for(var i=0;i<arr.length;i++){if(arr[i].indexOf(str)!==-1){return true;}
            }
            return false;
        }
    }
    $.fn.leoTextAnimate = function(options) {$(this).each(function(){var plugin = $._data(this, "leoTextAnimate");
            if(!plugin){var opts = $.extend(true, {}, $.fn.leoTextAnimate.defaults, typeof options === "object" ? options : {});
                plugin = new leoTextAnimate(this, opts);
                $._data(this, "leoTextAnimate", plugin);
            }
            if (plugin[options]) {return plugin[options].apply(plugin, Array.prototype.slice.call(arguments, 1));
            } else if (typeof options === 'object' || !options) {return plugin.init();
            } else {$.error('Method' + options + 'does not exist on jQuery.leoTextAnimate');
            }
            return this;
        });
    };
})(jQuery, window, document);

使用方法：

$("#totalnum").html("2,423");
$('#totalnum').leoTextAnimate({fixed: [',', ':', '.'],
        start: '0'
    });