jquery倒计时插件

发表于

分享一个jquery倒计时插件

demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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>

data-diff里面是目的时间，可以传两种格式的字符

  • 一种是21234567890是这种格式，内容直接当秒处理
  • 另一种是2014-12-05 00:00:00这种形式的日期+时间的式，内部计算和当前时间想差多少秒

下面是内部对data-diff参数的处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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);
}

默认的时间输出格式是

1
<span class="hour">%{h}</span>小时<span class="minute">%{m}</span>分钟<span class="second">%{s}</span>秒

当然我们也可以在调用插件时传入我们自定义的tmpl，默认的tmpl已经在时间的外面套上了一层html标签，我们可以很方便的给输出的时间加上我们自定义的样式

项目地址：http://jquerycountdown.codeplex.com/