SOURCE

/**
 * 包含数字的jQuery对象直接调用
 */
;(function(win,$){
	var $target;
	var template = '<div class="p_bit"><ul><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div>';
	var m_symbol = '<div class="s_bit">-</div>'
	$.fn.dataScroll=function(options){
		$target = $(this);
		if($.fn.dataScroll.methods[options]){
			return $.fn.dataScroll.methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
		}else if(typeof options == 'object' || !options){
			return $.fn.dataScroll.methods.init.apply(this, arguments);
		}else{
			$.error('Method ' + options + ' does not exist on jQuery.dataScroll');
		}
	}
	
	$.fn.dataScroll.methods={
		init:function(op){
			var defualt = {
					dom:$target,
					id:'',//dataScrollID 组件ID
					width:9,//每个数字的宽
					height:20,//每个数字的高
					data:null,//初始化数据  如配置此项初始化时将不再获取dom中的数据
					onChange:function(curData,oldData){//改变回调
						
					}
			};
			var settings=$.extend(defualt, op);
			$target.data('set',settings);
			var data = settings.data==null?$target.text():settings.data;
			settings.curData =data;
			$target.empty();
			if($.isNumeric(data)){
				showNum($target,data);
				_style($target);
			}
			
		},
		reload:function(data){
			showNum($(this),data);
		}
	};
	function _style($dom){
		var opt = $dom.data('set')
		$dom.find('div.p_bit').css({
			height: opt.height,
			width: opt.width,
		});
		$dom.find('div.p_bit li').css({
			height: opt.height,
			'line-height': opt.height+'px',
		});
	}
	function showNum($dom,data){
		var it = $dom.find('div.p_bit');
		var opt = $dom.data('set');
	    var len = String(data).length; //赋值数据长度
	    var oldLen = opt.curData==null?0:String(opt.curData).length;//现有数据长度
		if(len<oldLen){
			for(var i=len;i<oldLen;i++){
				$dom.find('div.p_bit:eq('+len+')').remove();
			}
		}
	    for(var i=0;i<len;i++){ 
	        if(it.length<=i){
	        	$dom.append(template); 
	        	_style($dom);
	        } 
	        var num=String(data).charAt(i); 
	        var y = -parseInt(num)*opt.height; //y轴位置 
	        var $obj = $dom.find('div.p_bit:eq('+i+') ul'); 
	        $obj.css('top',y);
	    } 
	    if(data<0){
	    	if($dom.find('div.s_bit').length==0){
	    		$dom.prepend(m_symbol);
	    	}
	    	$dom.find('div.s_bit').css({
				height: opt.height,
				width: opt.width,
				'line-height': opt.height+'px',
			});
	    }else{
	    	$dom.find('div.s_bit').remove();
	    }
	    opt.curData = data;
	    $dom.data('set',opt);
	}
	
	
})(window,jQuery);
$(function(){
		$('#realData').dataScroll();
		$('#realData2').dataScroll();
		 setInterval(function(){
			$('#realData').dataScroll('reload',parseInt(Math.random()*-1000,10));
			$('#realData2').dataScroll('reload',parseInt(Math.random()*100000,10));
// 			 $('#realData').dataScroll('reload',23);
		 }, 3000);//每隔3秒执行一次 
	})

<div class="main">
	实时数据：<span id="realData">1654866</span>
	<br/>
	实时数据：<span id="realData2">115678466</span>
</div>

.main{
	width: 50vw;
    height: 50vh;
    margin: auto;
    line-height: 50vh;
    text-align: center;
}
#data{
/* 	font-size: 30px; */
}

div.p_bit,div.s_bit{
	display: inline-block;
	overflow: hidden;
	vertical-align: middle;
	height: 20px;/*组件需配置 默认20px*/
	width: 9px;/*组件需配置 默认9px*/
	position: relative;
}
div.p_bit ul {
	position: absolute;
	list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    transition:all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease; 
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}
div.p_bit ul li{
	margin: 0;
    padding: 0;
	height: 20px;/*组件需配置 默认20px*/
	line-height: 20px;/*组件需配置 默认20px*/
	width: 100%;
	text-align: center;
}