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. Codeforces Round #80 Div.1 D

    思路:考虑离线操作,以y为关键字排序,对于y相同的一起操作,然后考虑y的范围,当y<=sqrt(n)时,直接O(n)预处理出f[x]表示f[x]+f[x+y]+f[x+2*y]+..+f[x+k ...

  2. time.h文件中包含的几个函数使用时须注意事项

    time.h头文件中包含以下函数 char* asctime(const struct tm *tm); char* asctime_r(const struct tm *tm,char *buf); ...

  3. c++学习笔记2（c++简单程序）

    c++的简单程序 练习一: #include <iostream>int main(){std::cout<<"你好c++\n";int x;std::ci ...

  4. 24种设计模式--观察者模式【Observer Pattern】

     <孙子兵法>有云: “知彼知己,百战不殆:不知彼而知己,一胜一负:不知彼,不知己,每战必殆”,那怎么才能知己知彼呢?知己是很容易的,自己的军队嘛,很容易知道,那怎么知彼呢?安插间谍是很好 ...

  5. 负载均衡集群中的session解决方案

    前言 在我们给Web站点使用负载均衡之后,必须面临的一个重要问题就是Session的处理办法,无论是PHP.Python.Ruby还是Java,只要使用服务器保存Session,在做负载均衡时都需要考 ...

  6. OpenCV2学习笔记02：MSVC2013搭建OpenCV开发环境

    我这里编译的库是通过手动编译的.只是需要注意的是,手动编译一般会产生大量的文件,差不多7个多G的样子,实在是有点浪费硬盘存储呀,其实我们可以删除掉没有用的东西.因为我们在编译的时候指定了一个目录比如我 ...

  7. @font-face

     /**  * jQuery.hhNewSilder 滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  8. c#语音

    1.新建WinForm程序,项目名称命名为Speech. 2.在COM组件中添加SpeechLib的引用. using SpeechLib;//添加语音引用 添加一个文本框并将其重命名为txtCont ...

  9. html5写的一个时钟

    看到的一个html5写的时钟 <!doctype> <html> <head> <script> window.onload=function(){ v ...

  10. 开源CMS赏析

    国内CMS产品有很多,开源的产品也不少,大概的可分为以下几类: .NET开源产品:We7CMS: PHP开源产品:Dede CMS.PHP CMS和帝国CMS: ASP开源产品:动易SiteFacto ...