Final Countdown - A simple and html agnostic date countdown

The Final Countdown is a plugin tailored to be used in any layout, without worring with CSS of HTML. The design goal was to fit and mimic differents countdown styles as you see out there in coupons and auction sites.

Features

• Comprehensive documentation
• Bult-in time formatter
• Zero-pad support to all variables
• Pluralization support
• Internationalization support for pluralization
• Fully tested (since first release)
• HTML and CSS agnostic
• Community support since 2011

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: hilios.github.io

1. INCLUDE JS FILES

<script src="//code.jquery.com/jquery.js"></script>
<script src="http://hilios.github.io/jQuery.countdown/javascripts/jquery.countdown.min.js"></script>

2. HTML

<div id="getting-started">
   Next year in
   <span>%w</span> weeks
   <span>%d</span> days
   <span>%H</span> hours
   <span>%M</span> minutes
   <span>%S</span> seconds
</div>

3. JAVASCRIPT

$('#getting-started').countdown('2015/01/01', function(event) {
    $(this).html(event.strftime('Next year in '
    + '<span>%w</span> weeks '
    + '<span>%d</span> days '
    + '<span>%H</span> hours '
    + '<span>%M</span> minutes '
    + '<span>%S</span> seconds'));
});

4. 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 thtat ALL events should be registered with the namespace *.countdown.

5. 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',
    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',
        totalDays:  '{int} Total amount of days left until final date',
        weeks:      '{int} Weeks left until the final date',
        months:     '{int} Months left until final date' ,
        years:      '{int} Year left until final date'
    }
}

6. FORMATTER

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.

Directives

* Due to their non linear constrains the years and months calculation are not precise and it's pretending to use as a approximation or not use at all.

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.

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 tage 23:45:56 (or) 2 tag 23:45:56
event.strftime('%S %!S:sekonde,sekonden;'); // 01 sekonde (or) 02 sekonden

7. 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');