How to use jQuery countdown plugin
Install
We provide two installation methods:
Bower
bower install jquery.countdown
Manual
Download the files and add a script
to your
html:
<script src="/bower_components/jquery.countdown/dist/jquery.countdown.js"></script>
Requirements
The latest versions
supports jQuery from 1.7 up
to >= 2.1. For legacy support (<= 1.6) please use the
version 1.0.2.
Introduction
For each DOM in your selector chain, an instance of the
countdown will be created with an interval, that sends signals (events) with the
time remaining components has weeks, days, hours, so on so forth (for more
details see Event
object section). The countdown is wrapped within the DOM
and will auto delete itself when the DOM is removed.
$('div#clock').countdown(finalDate[, callback]);
With the legacy approach you will need to handle all
events in a single callback (update, finish or stop) through
the event.type
property,
if you prefer an event orieted programming style, this plugin also support the
default jQuery on
method to register your
callbacks.
$('div#clock').countdown(finalDate)
.on('update.countdown', callback)
.on('finish.countdown', callback);
To start the countdown the only requirement is
the finalDate
, but you
still need register a callback to manipulate/update the DOM.
Arguments
finalDate
The target date that you are seeking to countdown. This
argument can be one of the following:
- A native date object
- The milliseconds from Epoch time
- String formatted as following:
YYYY/MM/DD
MM/DD/YYYY
YYYY/MM/DD
hh:mm:ssMM/DD/YYYY
hh:mm:ss
callback
A function that will handle the event
triggered, despite the
fact we have three event types, all of them will have the same object properties
(as described bellow), where you can access the offset calculation.
function(event) { ... }
Configuration object
The plugin accepts some configuration passing by an
object has the function second argument. This way one can control the precision
the plugin will have and allow customizations:
$('div#clock').countdown(finalDate, {
elapse: '{bool} Allow to continue after finishes',
precision: '{int} The update rate in milliseconds',
defer: '{bool} Deferred initialization mode'
})
The configuration mode is only available with the new
style of initialization.
Elapse mode
The elapse mode allows the plugin to continue counting
even after reaches its finish. One can control the render within the callback
using the event.elapsed
property.
$('div#clock').countdown(finalDate, {elapse: true})
.on('update.countdown', function(event) {
if (event.elapsed) { // Either true or false
// Counting up...
} else {
// Countdown...
}
});
Be aware that no finish
event will be
dispatched at this mode!
Deferred initialization
The deferred initialization mode allows you to register
the callback before the countdown actually starts, this is useful when one wants
to render the proper HTML the exact time the countdown starts, (i.e. when the
countdown are really short time <= 60s).
Just be aware that the
developer MUST call
the start
method manually to
begin the countdown:
// It will render correctly since the start of the plugin.
$('div#clock').countdown(finalDate, {defer: })
.on('update.countdown', function() {
// render something
})
.countdown('start');
Events
This plugin will trigger an event whenever some state
change like:
- Update:
Triggered to update the DOM - Finish:
Triggered when finished - Stop:
Triggered that paused
To register a callback use the
following event.type
:
update.countdown
finish.countdown
stop.countdown
Be aware
that ALL events should be
registered with the namespace *.countdown
.
Event object
Most of the time you will be using
the event.strftime
function to
render the countdown, the next section goes deeper in this subject. But you can
access all raw values:
{
type: '{String} The namespaced event type {update,finish,stop}.countdown',
strftime: '{Function} The formatter function',
finalDate: '{Date} The parsed final date native object',
elapsed: '{bool} Passed away the final date?',
offset: {
seconds : '{int} Seconds left for the next minute',
minutes : '{int} Minutes left for the next hour',
hours : '{int} Hours left until next day',
days : '{int} Days left until next week',
daysToWeek : '{int} Days left until next week',
daysToMonth : '{int} Days left until next month',
weeks : '{int} Weeks left until the final date',
weeksToMonth: '{int} Weeks left until the next month',
months : '{int} Months left until final date',
years : '{int} Years left until final date',
totalDays : '{int} Total amount of days left until final date',
totalHours : '{int} Total amount of hours left until final date',
totalMinutes: '{int} Total amount of minutes left until final date',
totalSeconds: '{int} Total amount of seconds left until final date'
}
}
Formatter (event.strftime)
A simple formatter that helps keep your code more
semantic and avoid repetitive tasks.
It formats the offset date according to the directives
in the given format string. The directive consists of a percent (%
)
character. Any text not listed as a directive will be passed through to the
output string.
event.strftime('%W weeks %-d days %-H h %M min %S sec');
// => 1 week 2 days 3 h 04 min 05 sec
All the directives contains zero-padded (01, 02, 03, …,
10) and blank-padded (1, 2, 3, …, 10) versions, to use the latter please use the
dash -
modifier.
The formatter is also capable of handle pluralization
through the bang !
modifier, by default always
return the s
character, if you need a
complex logic please read
the Pluralization topic of
this section.
Modifier | Description |
---|---|
- |
Blank padding |
! |
Pluralization plugin |
Directives
Directive | Blank-padded | Description |
---|---|---|
%Y |
%-Y |
Years left * |
%m |
%-m |
Months left * |
%n |
%-n |
Days left until the next complete month * |
%w |
%-w |
Weeks left |
%W |
%-W |
Weeks left until the next complete month * |
%d |
%-d |
Days left (taking away weeks) |
%H |
%-H |
Hours left |
%M |
%-M |
Minutes left |
%S |
%-S |
Seconds left |
* Due to their non linear
constrains the calculation does not have precision and it’s pretending to be
used as a approximation or not use at all.
There are another set of directives that returns the
full count of the time component till the end of the countdown:
Directive | Blank-padded | Description |
---|---|---|
%D |
%-D |
Total count of days till the end |
%I |
%-I |
Total count of hours thill the end |
%N |
%-N |
Total count of minutes till the end |
%T |
%-T |
Total count of seconds till the end |
Pluralization
The support for pluralization is built in the formatter
by adding the !
(bang) modifier to the
directive, the default behavior is to return
the s character, it’s also
possible to customize the return using the suffix :...;
.
The table bellow show the supported use cases of the
pluralization plugin.
Directive | Description |
---|---|
%!H |
Return s when the hour is different than 1 |
%!S:plural; |
Return plural when seconds if different than 1 |
%!d:singular,plural; |
Return singular when day is 1 and plural otherwise |
event.strftime('%-D day%!D %H:%M:%S');
// => 1 day 23:45:56 (or) 2 days 23:45:56
// Now in german
event.strftime('%-D tag%!D:e; %H:%M:%S');
// => 1 tag 23:45:56 (or) 2 tage 23:45:56
event.strftime('%S %!S:sekunde,sekunden;');
// => 01 sekunde (or) 02 sekunden
Controls
The methods pause
/resume
allows to control the
execution flow of the countdown:
// Pause the countdown
$('div#clock').countdown('pause');
// Resume the countdown
$('div#clock').countdown('resume');
There also the aliases stop
/start
for the same
functionality:
// Pause the countdown
$('div#clock').countdown('stop');
// Resume the countdown
$('div#clock').countdown('start');
To set a new final date for the countdown, call the
plugin initialization function with a valid date string:
$('div#clock').countdown('2010/10/10');
// Then ...
$('div#clock').countdown('2012/20/20 12:34:56');
How to use jQuery countdown plugin的更多相关文章
- jQuery Countdown Timer 倒计时效果
这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...
- 30个非常流行的提示信息插件(jQuery Tooltip Plugin)
在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用.如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件 ...
- JQuery多媒体插件jQuery Media Plugin使用详解
malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...
- jQuery DataTables Plugin Meets C#
Over the weekend, I was doing some work on the internal CMS we use over at eagleenvision.net and I w ...
- jQuery Validation Plugin学习
http://blog.csdn.net/violet_day/article/details/14109261 jQuery Validation Plugin Demo 一.默认校验规则 (1)r ...
- (转)jQuery Validation Plugin客户端表单证验插件
jQuery Validation Plugin客户端表单验证插件 官方文档:http://jqueryvalidation.org/documentation/ 官方demo:http://jque ...
- 表单验证的validate.js插件---jQuery Validation Plugin
早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...
- jQuery validator plugin 之 custom methods 案例1:multi email
1.add method jQuery.validator.addMethod( "multiemail", function (value, element) { var ema ...
- jQuery webcam plugin
jQuery webcam plugin The jQuery webcam plugin is a transparent layer to communicate with a camera di ...
随机推荐
- [Python] 拉格朗日插值
#-*— coding:utf-8 -*- #Program 0.3 Lagrange Interpolation import matplotlib.pyplot as plt import num ...
- 简单工厂法( Factory Method)
工厂方法 (Factory Method) Define an interface for creating an object ,but let subclasses decide which cl ...
- 柒月风华BBS上线
论坛地址:https://3003soft.top/LBBS/ 欢迎大家加入. 开放式轻论坛:记录好玩.有趣的事儿:一起努力,一起前进: 希望能建立一个分享各类解决方案的社区
- VBA 选择文件
Private Function SelectFile(ByVal strFilter As String) As String Dim FileName As Variant '打开文 ...
- as3 声明变量
var a:int=0, b, c:Number=2; trace(a,b,c) /* 0 undefined 2 */ var a:int, b:uint, c:Number; var d:Stri ...
- ubuntu编译安装php7, 安装openssl
sudo apt-get install openssl sudo apt-get install libssl-dev
- Delphi 操作键盘按下和释放操作
Unit Unit1; Interface Uses Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs, ...
- ArcGIS案例学习笔记2_1
ArcGIS案例学习笔记2_1 联系方式:谢老师,135_4855_4328,xiexiaokui#qq.com 时间:第二天上午 案例1:学校选址 内容:栅格数据分析 教程:pdf page=323 ...
- (转)游戏引擎中三大及时光照渲染方法介绍(以unity3d为例)
重要:在目前市面上常见的游戏引擎中,主要采用以下三种灯光实现方式: 顶点照明渲染路径细节 Vertex Lit Rendering Path Details 正向渲染路径细节 Forward Rend ...
- 首届阿里巴巴在线技术峰会,9位大V演讲整理!
https://yq.aliyun.com/articles/57826 感谢参加阿里巴巴在线技术峰会.7月19日的3场专家分享:Blink.Docker.电商互动:7月20日的云数据库十大经典案 例 ...