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);

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>

http://jquerycountdown.codeplex.com/

Jquery扩展- 倒计时的更多相关文章

  1. Python之Web前端jQuery扩展

    Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...

  2. 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...

  3. 使用jquery获取url及url参数的方法及定义JQuery扩展方法

    1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识. 2.jquery获取 ...

  4. Javascript对象、Jquery扩展简单应用

    Javascript对象,表现方式一: person = new Object(); person.firstname = "An"; person.lastname = &quo ...

  5. Jquery扩展-手把手带你体验

    Jquery扩展是在项目中经常用到的,有时候为了提取一些公共方法,有时候为了模块化管理等等,下面我们来体验一下.当然扩展离不开Jquery几个基础方法 1:$.extend() 2:$.fn.func ...

  6. jquery扩展 $.fn

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个 ...

  7. jQuery 扩展 【ajax实例】

    先前写工具类都是自定义类,直接prototype,jQuery扩展这一块儿,一直也没写过,刚好今天有空,写个试试. 已经有很多人对jQuery,jQuery.fn,jQuery.fn.extend详细 ...

  8. jQuery扩展与noConflict的用法-小示例

    有时我们要用到自己定义的jquery,这时可以通过jQuery扩展来实现该功能 index.html <!DOCTYPE html> <html> <head> & ...

  9. 区域及分离、Js压缩、css、jquery扩展

    后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做 ...

随机推荐

  1. zoj1873 Let it Bead

    思路:polya裸题,如果是旋转,对于旋转i格的循环节长度len=lcm(i,n)/i,个数就是n/len=gcd(i,n):如果是翻转,奇数个点对称轴就是一个点一条边,那么循环节个数即n/2+1, ...

  2. （转）Libevent（3）— 基础库

    转自:http://name5566.com/4202.html 参考文献列表:http://www.wangafu.net/~nickm/libevent-book/ 此文编写的时候,使用到的 Li ...

  3. 原型模式（Prototype Pattern）

    原型模型:用于创建重复对象,同时保证性能. 这种模式实现一个原型接口,用于创建对象的克隆,当直接创建对象的代价比较大,则可以采用这种模式.例如:一个对象需要高代价的数据库操作之后被创建,这时可以缓存该 ...

  4. 一次plsql 问题记录

    环境 : window 7 x64  oracle 10.2g  plsql 10.0.5 问题是 新装的 oracle10.2 plsql 一直连接不上 ,oracle_home 配置都对 .sql ...

  5. 【C++】类型转换

    引言 C++风格的四种类型转换方法:static_cast.dynamic_cast.reinterpret_cast.const_cast. 欢迎来到 lovickie 的博客 http://www ...

  6. std::string stringf(const char* format, ...)

    std::string stringf(const char* format, ...){ va_list arg_list; va_start(arg_list, format); // SUSv2 ...

  7. MySQL修改时区的方法小结

    这篇文章主要介绍了MySQL修改时区的方法,总结分析了三种常见的MySQL时区修改技巧,包括命令行模式.配置文件方式及代码方式,需要的朋友可以参考下 方法一:通过mysql命令行模式下动态修改 1.1 ...

  8. WordPress D8 主题当中截取文章首图并显示的函数

    取自 WordPress D8 主题; 路径 theme\d8\modules ; if ( ! function_exists( 'deel_thumbnail' ) ) : function de ...

  9. scrapy使用爬取多个页面

    scrapy是个好玩的爬虫框架,基本用法就是:输入起始的一堆url,让爬虫去get这些网页,然后parse页面,获取自己喜欢的东西.. 用上去有django的感觉,有settings,有field.还 ...

  10. C++顺序容器类总结

    主要是vector,deque,list,forward_list,array,string 插入方法: 元素访问: 元素删除: 容器赋值: forward_list有很多特殊的方法 毕竟平时forw ...