js+css3 動畫數字累加

 

css:

        .kk{
            width:100px;
            height:100px;
            display:inline-block;
            color:red;
            text-align:center;
            position: relative;
            font-weight: bold;
            line-height:100px;
            background:url(./pic.png);
            background-size: 100%;
            line-height: 79px;
            font-weight:bold;
            font-size:18px;
        }
        
        .anmintate{
            animation: animated_div 1s infinite;
            -moz-animation: animated_div 1s infinite;
            -webkit-animation: animated_div 1s infinite;
            -o-animation: animated_div 1s infinite;
        }
        

    @-webkit-keyframes animated_div
        {
            0%{top:0;}
            100%{top:50px;}
        }

html:

<div class="kk anmintate">
        6454
    </div>

Js:

    $(function(){
        numAc('.kk','200','56','50')    ;
    })    
    //  doc 對象
    //  time  起始
    //  seep  每次增加
    //  index 時間
    function numAc(doc,time,seep,index){
         obj_text = parseInt($(doc).text());
         obj = $(doc);
         times = parseInt(time);
        var time = setInterval(function(){
            times = times+=parseInt(seep);
            obj.html(times);
            if(times >= obj_text){
                clearInterval(time);
                obj.removeClass('anmintate');
                return false;
            }
        },index);
    }
        

  改進后：

    $(function(){
        numAc('.kk','200','56','50','')    ;
    })    
    //  doc 對象
    //  time  起始
    //  seep  每次增加
    //  index 時間
    //   num  最終數字  （可選項）  如果為空，會獲取對象的INNerhtml
    
    function numAc(doc,time,seep,index,num){
        if(num){
            obj_text = num ;
        }else{
             obj_text = parseInt($(doc).text());
        }
        
         obj = $(doc);
         times = parseInt(time);
        var time = setInterval(function(){
            times = times+=parseInt(seep);
            obj.html(times);
            if(times >= obj_text){
                clearInterval(time);
                obj.removeClass('anmintate');
                return false;
            }
        },index);
    }