到數計時效果

//方式1:用jquery過場動畫

var jqDivContainer = $('#divContainer');

function countdown(time){
    jqDivContainer.prepend('<h1 id="h1Countdown"></h1>').css('position', 'relative');
    var jqH1Countdown = $('#h1Countdown');
    jqH1Countdown.css({
        color:'white',
        'line-height': '300px',
        width: '100%',
        'text-align': 'center',
        'margin-top': 0,
        'font-size': 64,
        position: 'absolute',
    });

function repeat(time){
        jqH1Countdown.text(time);
       
        jqH1Countdown.fadeIn(500,'swing',function(){
            jqH1Countdown.fadeOut(500,'swing',function(){
                time--;
                if (time > 0) repeat(time);
                else {
                    jqH1Countdown.remove();
                    jqDivContainer.css('position', 'static');
                }
            });
        });
    }

    repeat(time);

}

countdown(10);

點我看demo

//方式2:用css transition

var jqDivContainer = $('#divContainer');

function countdown(time){
    jqDivContainer.prepend('<h1 id="h1Countdown"></h1>').css('position', 'relative');
    var jqH1Countdown = $('#h1Countdown');
    jqH1Countdown.text(time).toggleClass('show');
    function repeat(time) {
        setTimeout(function(){
            var isShowing = jqH1Countdown.hasClass('show');
            if(!isShowing) time--;
            if(time > 0){
                if(!isShowing) jqH1Countdown.text(time);
                jqH1Countdown.toggleClass('show');
                repeat(time);
            }else {
                jqH1Countdown.remove();
                jqDivDrawingJumbo.css('position', 'static');
            }
        },500);
    }

    repeat(time);


}

countdown(10);

點我看demo