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. Java基础巩固----泛型

    注:参考书籍:Java语言程序设计.本篇文章为读书笔记,供大家参考学习使用 1.使用泛型的主要优点是能够在编译时而不是在运行时检查出错误,提高了代码的安全性和可读性,同时也提高了代码的复用性. 1.1 ...

  2. Fedora 17 修改GRUB启动菜单顺序

    Fedora 16采用GRUB2,因此启动菜单编辑方式与以前版本有所不同 设置默认启动Windows 1. 首先找到Windows的menuentry # cat   /boot/grub2/grub ...

  3. Cassandra CqlRow fetch DateType / Int32Type

    phpcassa library里有个namespace : use phpcassa\Schema\DataType; 当使用cql query得到cqlrow, int32 & Date ...

  4. SQLite学习第01天：参考资料

    今天开始学习数据库相关的知识,由于本人从事的是嵌入式软件开发方向,所以在数据库的选择时就果断选择了SQLite,在网上搜索了一下相关的资料并且配置好了环境.首先,想要对SQLite有一个基本的了解还是 ...

  5. jQuery DataTables 插件使用笔记

    初始化 在页面中 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type=&q ...

  6. CSS禁止Chrome谷歌浏览器激活输入框后自动添加橘黄色边框

    Chrome默认会为所有的输入框加上橘黄色的边框,虽然有时候可以使我们的网站看起来更友好,但对自定义的样式是有影响的.当鼠标点击输入框时,在谷歌chrome浏览器中,光标移到输入框时激活输入框会被加上 ...

  7. PHP构造函数的用法分析

    PHP构造函数的声明与其它操作的声明一样,只是其名称必须是__construct( ).这是PHP5中的变化,以前的版本中,构造函数的名称必须与类名相同,这种在PHP5中仍然可以用,但现在以经很少有人 ...

  8. 问自己----也是自己该怎么走的路（phper）

    1.首先看了PHP的源码API函数,对于许多口水仗的争论一笑而过,只是停留在脚本级别上的什么效率,安全...之争完全就是无稽之谈,没有深入理解API,所有的争论都是臆测和不科学的态度.你做了吗? 2. ...

  9. iOS开发之iOS程序偏好设置(Settings Bundle)的使用

    目录[-] 1.添加设置项 2.设置的控件 3.编辑设置项的文件 4.在程序中获取Settings 和写入Settings 添加UI 5.实现读取设置和保存代码 在Android手机上, 在某个程序里 ...

  10. 【poj3734】矩阵乘法求解

    [题意] 给N个方块排成一列.现在要用红.蓝.绿.黄四种颜色的油漆给这些方块染色.求染成红色方块和染成绿色方块的个数同时为偶数的染色方案的个数,输出对10007取余后的答案.(1<=n<= ...