基于jQuery的倒计时插件,使用者可参考参数,配置出合适的倒计时。
首先,需要类似以下的HTML结构:
<div class="countdown">
<span>剩余时间(天到毫秒):</span>
</div>
接下来,引入js以及编辑js:
- 方式一: 在页面中引入jquery-1.11.3.min.js以及countDown.js 如下所示:
<script type="text/javascript" src="/path/to/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/path/to/countDown.js"></script>
然后你可以像下面这样调用:
$(".countdown").countdown({
"maxRange": 3,
"endEffect": function() {
// this.slideUp(); 不可取,this指向window
$(".countdown").slideUp();
}
});
注意:如果使用endEffect时,函数内部如果使用this,很有可能指向window
- 方式二:
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) |
method(arguments) | Description |
---|---|
init | 初始化方法,第一次调用插件时会自动执行 |
start | 开始倒计时方法/重新开始倒计时方法 |
pause | 暂停倒计时方法 |