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. Batch file Functions

    Quote from: http://ss64.com/nt/syntax-functions.html Batch file Functions Packaging up code into a d ...

  2. linux进程间通信--无名管道

    管道 只能用于具有亲缘关系的进程之间通信是一个半双工的通信模式, 具有固定的写读端和写端,管道可以看成一种特殊的文件,对它可以使用普通的read.write等操作 管道的创建: #include &l ...

  3. 深入了解float

    1.float的历史   初衷是为了图片的文字环绕,将img设置float 2.破坏性与包裹性  a.父元素没有设置高度,内部元素浮动后,服务元素的高度被破坏了,可以将其父元素设置overflow:h ...

  4. sql server 数据库正在使用该文件的解决办法

    今天在帮朋友还原数据库时遇到了一个问题.朋友用的是sql server 2008数据库,本身有一个数据库,他在修改程序的时候,想修改数据库的内容.但是又不想在原数据库中修改.想备份还原出一个数据库然后 ...

  5. php学习，一个简单的Calendar(2) 一个简单的活动页面

    有了前面的基础,后面就是将页面展示出来. 预览图如下:1号和31号分别有活动,会一并显示出来   这里需要搞定几个问题,一个就是数据库的连接,我们用\sys\class\class.db_connec ...

  6. linux下安装phpredis

    一.redis安装 1. yum install redis (不行的先执行:yum install epel-release,再yum install redis) 2.启动服务 redis-ser ...

  7. user-agent查询

    浏览器地址栏输入:javascript:window.navigator.userAgent通过网站查询:http://www.enhanceie.com/ua.aspxhttp://www.user ...

  8. #Leet Code# Best Time to Buy and Sell Stock

    描述:数组 A,对于 i < j, 找到最大的 A[j] - A[i] 代码: class Solution: # @param prices, a list of integer # @ret ...

  9. osg(OpenSceneGraph)学习笔记1：智能指针osg::ref_ptr<>

    OSG的智能指针,osg::ref_ptr<> osg::Referenced类管理引用计数内存块,osg::ref_ptr需要使用以它为基类的其它类作为模板参数. osg::ref_pt ...

  10. 头文件的宏定义#ifndef测试

    一.入题 在头文件的书写中,都加入了如下内容: #ifndef __头文件名_H #define __头文件名_H #endif 曾经在书中看到的解释是“防止重复定义”,今天突然想到为什么是这样的解释 ...