jQuery实现倒计时插件

Posted on 2012-01-10 09:28 PHP博客 阅读(301) 评论(0)  编辑 收藏 引用 网摘
本文将使用jQuery开发一个倒计时效果插件,使用这个插件你可以生成一个非常炫的倒计时器,你可以方便的整合到你需要的web功能模块中,希望大家喜欢!

<div id="countdown" class="countdownHolder">
    <span class="countDays" id="蘑菇姐">
        <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="breast">
            <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);
        }
    });

});

代码书写完毕!

只有注册用户登录后才能发表评论。
网站导航:

posts - 139, comments - 0, trackbacks - 0, articles - 0

Copyright © PHP博客