jq数字翻页效果，随机数字显示，实现上下翻动效果

最近在做一个项目，需要实时展示一串数字，要有类似于日历翻页的效果，在网上找寻了一番，发现dataStatistics这个插件http://www.jq22.com/jquery-info8141能实现这种效果，但是它实现的是在min设置的数值上累加1，css样式效果满足，但不符合的需要实时展示任意的数字要求，于是就稍微改动了一下代码，下面是项目代码。前端新手，代码写的很粗糙。

css样式部分

.dataStatistics .digit > div.digit_bottom .digit_wrap, .dataStatistics .digit > div.shadow_bottom .digit_wrap {
display: block;
margin-top: -78%;
}
/*.digit_bottom {
-webkit-transform-origin: 0% 50%;
-webkit-animation: flipBottom 3s 0.3s ease-out both;
-moz-transform-origin: 0% 50%;
-moz-animation: flipBottom 3s 0.3s ease-out both;
-ms-transform-origin: 0% 50%;
-ms-animation: flipBottom 3s 0.3s ease-out both;
transform-origin: 0% 50%;
animation: flipBottom 3s 0.3s ease-out both;
}*/
.dataStatistics .digit.active .digit_bottom {
z-index: 2;
-webkit-transform-origin: 50% 0%;
-webkit-animation: flipBottom 0.3s 0.3s ease-out both;
-moz-transform-origin: 50% 0%;
-moz-animation: flipBottom 0.3s 0.3s ease-out both;
-ms-transform-origin: 50% 0%;
-ms-animation: flipBottom 0.3s 0.3s ease-out both;
transform-origin: 50% 0%;
animation: flipBottom 0.3s 0.3s ease-out both;
}
.dataStatistics .digit.activeup .digit_top {
z-index: 2;
-webkit-transform-origin: 0% 100%;
-webkit-animation: flipBottomup 0.3s 0.3s ease-out both;
-moz-transform-origin: 0% 100%;
-moz-animation: flipBottomup 0.3s 0.3s ease-out both;
-ms-transform-origin: 0% 100%;
-ms-animation: flipBottomup 0.3s 0.3s ease-out both;
transform-origin: 0% 100%;
animation: flipBottomup 0.3s 0.3s ease-out both;
}
@keyframes flipBottom {
0% {
-webkit-transform: perspective(400px) rotateX(90deg); }

100% {
-webkit-transform: perspective(400px) rotateX(0deg); }
}
@keyframes flipBottomup {
0% {
-webkit-transform: perspective(400px) rotateX(-90deg); }

100% {
-webkit-transform: perspective(400px) rotateX(0deg); }
}
/*@keyframes flipBottom1 {
0% {
-webkit-transform: perspective(400px) rotateX(-90deg); }

100% {
-webkit-transform: perspective(400px) rotateX(0deg); }
}*/
.dataStatistics .digit.activeup .digit_bottom{
z-index: 1;
display: none;
}
</style>

html代码

javascript代码jquery.dataStatistics.js文件，由于是模仿任意数字显示滚动效果，就设置了0-9之内的随机数，3秒钟执行了一次累加，真实项目中是需要从后台获取任意数字然后再赋值。

$.fn.dataStatistics = function(options){
options = $.extend({
min : 100, //初始数值
times: 3000,
len:9 //数字是几位数
},options || {});

var ths = this;//解决this指向问题

//初始化---------------------------------------start

var el = ths.find('.set_last');
var html = '<div class="digit">' +
' <div class="digit_top">' +
' <span class="digit_wrap"></span>' +
' </div>' +
' <div class="shadow_top"></div>' +
' <div class="digit_bottom">' +
' <span class="digit_wrap"></span>' +
' </div>' +
' <div class="shadow_bottom"></div>' +
'</div>'
//初始化值
var nowNums=zfill(options.min, options.len).split("");
var realcarNums=options.min;
console.log(nowNums)
//补0
function zfill(num, size) {
var s = "000000000" + num;
return s.substr(s.length-size);//字符串从7开始取得字符串
}

ths.find('.digit_set').each(function() {
for(i=0; i<=9; i++) {
$(this).append(html);
$(this).find('.digit').eq(i).find('.digit_wrap').append(i);//每一个位数添加对应的数字
}
});

//初始化数值填入
$.each(nowNums, function(index,val) {//nowNums为一个数组[0,0,4,2,5,0]
var set =ths.find('.digit_set').eq(index);
var i =parseInt(val)
// console.log(i)
set.find('.digit').eq(i).addClass('active');

set.find('.digit').eq(i).find(".digit_top").slideDown(300)
// set.find('.digit').eq(i+1).addClass('previous');
});

//初始化---------------------------------------end
var oldcarNums=nowNums,nowarrcar=[];//旧数组为空值，新数组为添加了元素的值

function run(){
var nowrealcarNums=0;
function increase() {
var carnum=Math.floor(Math.random()*10)//0-9以内的随机数
nowrealcarNums=realcarNums+carnum;
console.log(nowrealcarNums)

realcarNums=nowrealcarNums

nowarrcar=zfill(nowrealcarNums, options.len).toString().split("")//添加了数量的新数组

$.each(nowarrcar, function(index,val) {
var set =ths.find('.digit_set').eq(index);
var i =parseInt(val)

if(nowarrcar[index]>oldcarNums[index]){
set.find('.digit').removeClass('active')
set.find('.digit').removeClass('activeup')
set.find('.digit').eq(i).addClass("active")
set.find('.digit').eq(i).find(".digit_top").fadeIn(500)
}
if(nowarrcar[index]<oldcarNums[index]){
set.find('.digit').removeClass('active')
set.find('.digit').removeClass('activeup')
set.find('.digit').eq(i).addClass("activeup")
console.log(123)
set.find('.digit').eq(i).find(".digit_bottom").fadeIn(500)
}
})
oldcarNums=nowarrcar
}
var timer1 = setInterval(increase,options.times);

}
run();
};

这个是最终效果

jq数字翻页效果，随机数字显示，实现上下翻动效果-LMLPHP