time-count-down

基于jQuery的倒计时插件，使用者可参考参数，配置出合适的倒计时。

Example

先搁点示例上来说吧。 各种示例

How to use

首先，需要类似以下的HTML结构：

<div class="countdown">
    <span>剩余时间（天到毫秒）：</span>
</div>

接下来，引入js以及编辑js：

<script type="text/javascript" src="/path/to/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/path/to/countDown.min.js"></script>

然后你可以像下面这样调用：

$(".countdown").countdown({
    "maxRange": 3,
    "endEffect": function() {
        // this.slideUp(); 不可取，this指向window
        $(".countdown").slideUp();
    }
});

注意：如果使用endEffect时，函数内部如果使用this,很有可能指向window

<script type="text/javascript" src="../lib/seajs/2.2.3/sea.js"></script>
    <script type="text/javascript">
    var randVersion = Math.random();
    seajs.config({
        alias: {
            "jquery": "jquery/1.11.3/jquery-1.11.3.min.js",
            "countDown": "../build/countDown.min"
        },
        map:[ [/^(.*\.(?:js))(.*)$/i, '$1?ver='+randVersion]]
    });
    seajs.use(["jquery", "countDown"], function(jQuery, countDown) {
        window.$ = window.jQuery;
        $(".test").countdown({
            startTime: "1441814400000",
            endTime: "1441900800000",   
            minRange: 1,
            maxRange: 2
        });
        $(".countdown:eq(0)").countdown({
            minRange: 0,
            maxRange: 3,
            endEffect: function() {
                $(".countdown:eq(0)").slideUp();
            }
        });
        $(".countdown:eq(1)").countdown({
            startTime: "1439740800000",
            endTime: "1440864000000",   
            minRange: 1,
            maxRange: 4,
            format: ["时", "分", "秒", "毫秒"],
            prefix: false
        });
        // $(".test").countdown();
        // $(".countdown:eq(0)").countdown();
        // $(".countdown:eq(1)").countdown();
    });
    </script>

Options

Property (Type) Default Description
now new Date().getTime() 现在的时间，13位时间戳(String)，毫秒为单位。如果提供了startTime与endTime，则now默认取客户端的时间；如果提供了now、startTime与endTime，则now为用户配置的值。
startTime null 开始的时间，13位时间戳(String)，毫秒为单位。如果没有提供now、endTime则默认倒计时时间为2分钟；
endTime null 开始的时间，13位时间戳(String)，毫秒为单位。如果没有提供now、endTime则默认倒计时时间为2分钟；
minRange 默认为0，时间最高能显示到“天” 需要显示的范围，可选值为(0-4或"0"-"4"或"day","hour","minutes","seconds","milliseconds")。例如：值为0、"0"与"day"代表时间最高能显示到“天”
maxRange 默认为4，时间最低能显示到“毫秒” 需要显示的范围，可选值为(0-4或"0"-"4"或"day","hour","minutes","seconds","milliseconds")。例如：值为4、"4"与"milliseconds"代表时间最低能显示到“天”。注意：maxRange>=minRange才能正常运行
format defaultFormat，即["天", "小时", "分钟", "秒", "毫秒"] 数组类型，时间显示的格式。例如：01天22小时03分钟。也可提供["天", "时", "分"]等。注意：提供的数组长度要等于maxRange-minRange+1。
prefix true 布尔类型，时间显示前缀，当数字小于9时，显示为09。如果为false时，当数字小于9时，显示为9。
endEffect null null/函数类型，倒计时结束时的效果。注意：函数内部不要使用this(此处有可能指向window)

Public plugin methods

method(arguments) Description
init 初始化方法，第一次调用插件时会自动执行
start 开始倒计时方法/重新开始倒计时方法
pause 暂停倒计时方法