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. UVA 10739 String to Palindrome（动态规划 回文）

    String to Palindrome 题目大意:给出一个字符串s,现在可以进行3种操作(添加字母,删除字母,替换字母),将其变成回文串,求出最少的操作次数.比如abccda,可以用删除操作,删除b ...

  2. 利用反射生成SQL语句

    // 修改学员信息的方法 public bool ModifyStudent(MODEL.Students model) { // 利用反映获取类对所有属性,用来动态生成SQL语句 StringBui ...

  3. tmux与vim主题不一致

    在centos6.5 x64 vim6.2 需要在tmux.conf中添加set -g default-terminal "screen-256color" 然后再次启动tmux的 ...

  4. sql 自身连接

    "select table1.field1, table2.field1 from table table1, table table2 where table1.id=table2.par ...

  5. OS概论1

    1.设计现代OS的主要目标是什么? 在计算机上配置操作系统,其主要目标是:方便性,有效性,可扩充性,开放性. 一个没有OS的操作系统,就必须用机器语言书写程序,如果在计算机上配置了OS,系统便可以使用 ...

  6. Windows server2008 搭建ASP接口访问连接oracle数据库全过程记录--备用

    真的是太不容易了,以前的时候在window server 2003上面搭建了一套asp+oracle的接口系统,就费了好大的劲儿,其实那会迷迷瞪瞪的也不知道怎么的就弄好了,也懒得管了.OK,从昨天到今 ...

  7. 国内物联网平台初探（八）：移动云OneNET

    国内物联网平台初探(八)——移动云OneNET 平台架构 数据模型 使用场景示意图 服务 IOT Paas 基础服务 为IoT开发者提供智能设备自助开发工具.后台技术支持服务,为您提供物联网专网.短彩 ...

  8. Codeforces Round #316 div2

    一场充满血腥hack之战!!! Problem_A: 题意: n个候选人在m个城市进行投票,每个城市选出票数最多的一个候选人为城市候选人,如果票数相同,则取编号小的候选人. 再从这m个城市候选人中选出 ...

  9. MySQL中的max_connections和max_user_connections 及 MySQL服务器最大连接数的合理设置

    max_connections 是指整个mysql服务器的最大连接数: max_user_connections 是指每个数据库用户的最大连接数,比如:虚拟主机可以用这个参数控制每个虚拟主机用户的数据 ...

  10. jQuery预加载插件

      插件描述:jQuery Fadeloader的插件可以让你轻松实现预加载到您的网站或部分使用级联渐显效果来显示特定的内容块(例如,头> MENU>内容>页脚) jQuery Fa ...