最近在做一個項目，需要實時展示一串數字，要有類似於日歷翻頁的效果，在網上找尋了一番，發現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();
};
這個是最終效果
