Skip to content

winsycwen/countDown

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

time-count-down

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

How to use

首先,需要类似以下的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

  • 方式二:

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 暂停倒计时方法