使用jQuery開發一個超酷的倒計時效果

今天我們分享一篇來自tutorialzine的教程，本文將使用jQuery開發一個超酷的倒計時效果插件，使用這個插件你可以生成一個非常炫的倒計時器，你可以方便的整合到你需要的web功能模塊中，希望大家喜歡！

<div id="countdown" class="countdownHolder">
    <span class="countDays">
        <span class="position">
            <span class="digit static"></span>
        </span>
        <span class="position">
            <span class="digit static"></span>
        </span>
    </span>

    <span class="countDiv countDiv0"></span>

    <span class="countHours">
        <span class="position">
            <span class="digit static"></span>
        </span>
        <span class="position">
            <span class="digit static"></span>
        </span>
    </span>

    <span class="countDiv countDiv1"></span>

    <span class="countMinutes">
        <span class="position">
            <span class="digit static"></span>
        </span>
        <span class="position">
            <span class="digit static"></span>
        </span>
    </span>

    <span class="countDiv countDiv2"></span>

    <span class="countSeconds">
        <span class="position">
            <span class="digit static"></span>
        </span>
        <span class="position">
            <span class="digit static"></span>
        </span>
    </span>

    <span class="countDiv countDiv3"></span>
</div>

以下代碼將演示如何調用上述插件：

$(function(){

    var note = $('#note'),
        ts = new Date(2012, 0, 1),
        newYear = true;

    if((new Date()) > ts){
        // The new year is here! Count towards something else.
        // Notice the *1000 at the end - time must be in milliseconds
        ts = (new Date()).getTime() + 10*24*60*60*1000;
        newYear = false;
    }

    $('#countdown').countdown({
        timestamp    : ts,
        callback    : function(days, hours, minutes, seconds){

            var message = "";

            message += days + " day" + ( days==1 ? '':'s' ) + ", ";
            message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
            message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
            message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";

            if(newYear){
                message += "left until the new year!";
            }
            else {
                message += "left to 10 days from now!";
            }

            note.html(message);
        }
    });

});

代碼書寫完畢！

posted @ 2012-01-05 23:06 igeekbar 閱讀(2379) 評論(4) 收藏舉報

刷新頁面返回頂部

使用jQuery開發一個超酷的倒計時效果

公告

中文互聯： GBin1.com | RSS訂閱 | 郵件訂閱 | 手機訂閱