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

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

css样式部分

<style>
.dataStatistics .digit_set {
float: left;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
border: 1px solid #111111;
width: 60px;
height: 100%;
display: inline-block;
position: relative;
margin: 0 5px;
}
.dataStatistics .digit {
position: absolute;
height: 100%;
}
.dataStatistics {
color: #fedec2;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 90px;
font-weight: bold;
line-height: 80px;
height: 80px;
width: 746px;
margin: 0px auto;
}
.dataStatistics .digit > div {
position: absolute;
left: 0;
overflow: hidden;
height: 50%;
width: 50px;
padding: 0 5px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
/* box-sizing: border-box; */
}
.dataStatistics .digit > div.digit_top:before, .dataStatistics .digit > div.shadow_top:before {
content: "";
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.dataStatistics .digit > div.digit_top, .dataStatistics .digit > div.shadow_top {
width: 60px;
background-color: #e38538;
border-bottom: 1px solid #e38538;
box-sizing: border-box;
top: 0;
/*z-index: 0;*/
border-radius: 10px 10px 0 0;
}
.digit_wrap {
line-height: 80px;
display: block;
overflow: hidden;
}
.dataStatistics .digit.active .digit_top {
z-index: 1;
display: none;
}
.dataStatistics .digit > div.digit_bottom, .dataStatistics .digit > div.shadow_bottom {
background-color: #e38538;
bottom: 0;
z-index: 0;
border-radius: 0 0 10px 10px;
}

.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代码

<div class="dataStatistics">
<div class="digit_set"></div>
<div class="digit_set"></div>
<div class="digit_set"></div>
<div class="digit_set"></div>
<div class="digit_set"></div>
<div class="digit_set"></div>
</div>

<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dataStatistics.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.dataStatistics').dataStatistics({min:4251,times:3000,len:6});
});
</script>

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();
};

这个是最终效果