Jquery扩展- 倒计时

Source Code

(function($) {
    $.fn.countdown = function(options) {
        // default options
        var defaults = {
            attrName : 'data-diff',
            tmpl : '<span class="hour">%{h}</span><span class="minute">%{m}</span>分钟<span class="second">%{s}</span>秒',
            end : 'has ended',
            afterEnd : null
        };
        options = $.extend(defaults, options);


        // trim zero
        function trimZero(str) {
            return parseInt(str.replace(/^0/g, ''));
        }
        // convert string to time
        function getDiffTime(str) {
            var m;
            if ((m = /^(\d{4})[^\d]+(\d{1,2})[^\d]+(\d{1,2})\s+(\d{2})[^\d]+(\d{1,2})[^\d]+(\d{1,2})$/.exec(str))) {
                var year = trimZero(m[1]),
                    month = trimZero(m[2]) - 1,
                    day = trimZero(m[3]),
                    hour = trimZero(m[4]),
                    minute = trimZero(m[5]),
                    second = trimZero(m[6]);
                return Math.floor((new Date(year, month, day, hour, minute, second).getTime() - new Date().getTime()) / 1000);
            }
            return parseInt(str);
        }
        // format time
        function format(diff) {
            var tmpl = options.tmpl, day, hour, minute, second;
            day = /%\{d\}/.test(tmpl) ? Math.floor(diff / 86400) : 0;
            hour = Math.floor((diff - day * 86400) / 3600);
            minute = Math.floor((diff - day * 86400 - hour * 3600) / 60);
            second = diff - day * 86400 - hour * 3600 - minute * 60;
            tmpl = tmpl.replace(/%\{d\}/ig, day)
                .replace(/%\{h\}/ig, hour)
                .replace(/%\{m\}/ig, minute)
                .replace(/%\{s\}/ig, second);
            return tmpl;
        }
        // main
        return this.each(function() {
            var el = this,
                diff = getDiffTime($(el).attr(options.attrName));
            function update() {
                if (diff <= 0) {
                    $(el).html(options.end);
                    if (options.afterEnd) {
                        options.afterEnd();
                    }
                    return;
                }
                $(el).html(format(diff));
                setTimeout(function() {
                    diff--;
                    update();
                }, 1000);
            }
            update();
        });
    };
})(jQuery);

View Code

Demo

<html>
    <head>
        <meta charset="utf-8" />
        <title>Countdown Demo</title>
        <style>
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="jquery.countdown.js"></script>
        <script>
            $(function() {
                $('.J_countdown1').countdown();
                $('.J_countdown2').countdown({
                    tmpl : '<span>%{d}</span>天<span>%{h}</span>小时<span>%{m}</span>分<span>%{s}</span>秒'
                });
                $('.J_countdown3').countdown({
                    tmpl : '<span>%{d}</span>天, <span>%{h}</span>小时, <span>%{m}</span>分, <span>%{s}</span>秒'
                });
            });
        </script>
    </head>
    <body>
        <div class="J_countdown1" data-diff="10"></div>
        <div class="J_countdown1" data-diff="70"></div>
        <div class="J_countdown1" data-diff="3610"></div>
        <div class="J_countdown1" data-diff="86410"></div>
        <div class="J_countdown2" data-diff="21234567890"></div>
        <div class="J_countdown3" data-diff="21234567890"></div>
    </body>
</html>

View Code

http://jquerycountdown.codeplex.com/

posted on 2014-06-11 10:11 顺风车阅读(208) 评论(0) 收藏举报