SOURCE

var num = document.querySelector(".num");
var numList = document.querySelector(".num-list");
var up = document.querySelector("#up");
var down = document.querySelector("#down");
var reset = document.querySelector("#reset");

var res = rand();
numChange(res);
// 随机数
function rand(){
  var data= Math.floor(Math.random()*9999999992229);
  return data;
}
// 方法一   判断间隔数字的位置
// function numChange(num){
//   str = String(num);
//   var len = str.length;
//   var array = [];
//   var spanBox="";
//   var rigs = Math.ceil(len/4-1);
//   numList.innerHTML = "";
//   for(var i=0;i<len;i++){
//     var newspan = document.createElement('span'); 
//     newspan.className = 'num'+str[i];
//     var s = ((len-1)-4*rigs)+1;
//     if(s == i){
//       rigs--;
//        newspan.className +=' right5';
//     }
//   	numList.appendChild(newspan);
//     array[i] = str[i];
//   }
//    document.querySelector(".arr-num").innerHTML = array;
// }
//方法二  根据余数判断位置
function numChange(num){
  str = String(num);
  var len = str.length;
  var array = [];
  var spanBox="";
  numList.innerHTML = "";
  var flag = 0;
  for(var i=0;i<len;i++){
    var newspan = document.createElement('span'); 
    newspan.className = 'num'+str[i];
   if(i==len % 4-1||flag == 3){
     flag = 0;
     newspan.className +=' right5';
   }else{
     flag ++;
   }
  	numList.appendChild(newspan);
    array[i] = str[i];
  }
   document.querySelector(".arr-num").innerHTML = array;
}
up.onclick = function(){
  res++;
	document.querySelector(".num").innerHTML = res;
	numChange(res);
}
down.onclick = function(){
  res--;
  console.log('--'+res);
	numChange(res);
  console.log('-='+res);
	document.querySelector(".num").innerHTML = res;
}
reset.onclick = function(){
  res = rand();
	document.querySelector(".num").innerHTML = res;
  numChange(res);
}
	document.querySelector(".num").innerHTML = res;

<div class="box-warp">
  <div class="num">12345</div>
  <div class="arr-num"></div>
  <div class="num-list">
  </div>
  <button id="up">+</button>
  <button id="down">-</button>
  <button id="reset">重置</button>
</div>

$imgUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAJhCAYAAAAzNvLgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA5NTJCOTZGRUYwMDExRTg4QzA5Q0RDMzUxNEVFMjYxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjA5NTJCOTcwRUYwMDExRTg4QzA5Q0RDMzUxNEVFMjYxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk1MkI5NkRFRjAwMTFFODhDMDlDREMzNTE0RUUyNjEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDk1MkI5NkVFRjAwMTFFODhDMDlDREMzNTE0RUUyNjEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4gHTeGAAAXU0lEQVR42uxdC5BU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';
.num-list{
overflow:hidden;
}
div{
  margin-top:20px;
}
span{
  display:block;
  float:left;
  margin-right:0;
  width:40px;
  height:52px;
  background: url($imgUrl) no-repeat  0 0;
  -webkit-transition: background-position 2s ease-in-out;
  -moz-transition: background-position 2s ease-in-out;
  -ms-transition: background-position 2s ease-in-out;
  transition: background-position 2s ease-in-out;
}
.right5{
  margin-right:15px;
}
.num1{  
  background-position: 0 -62px;
}
.num2{  
  background-position: 0 -124px;
}
.num3{  
  background-position: 0 -186px;
}
.num4{  
  background-position: 0 -248px;
}
.num5{  
  background-position: 0 -310px;
}
.num6{  
  background-position: 0 -372px;
}
.num7{  
  background-position: 0 -434px;
}
.num8{  
  background-position: 0 -496px;
}
.num9{  
  background-position: 0 -558px;
}
.num0{
  background-position: 0 0;
}