Final Countdown - Simple Date Countdown Plugin

Final Countdown - Simple Date Countdown Plugin
File Size: 25.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Final Countdown is a simple and abstract jquery Date Plugin for date or time countdown.

See also:

Basic Usage:

1. Include jQuery library and jQuery Final Countdown Plugin on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../src/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>

2. The Html

<div id="clock">
<p> <span id="weeks"></span> Weeks </p>
<div class="space">:</div>
<p> <span id="daysLeft"></span> Days </p>
<div class="space">:</div>
<p> <span id="hours"></span> Hours </p>
<div class="space">:</div>
<p> <span id="minutes"></span> Minutes </p>
<div class="space">:</div>
<p> <span id="seconds"></span> Seconds </p>
</div>

3. The CSS

div#clock {
color: white;
margin: 20px auto;
width: 600px;
overflow: hidden;
text-align: center;
}
div#clock p {
background: #333;
float: left;
height: 88px;
width: 88px;
}
div#clock p span {
display: block;
font-size: 50px;
font-weight: bold;
padding: 5px 0 0;
}
div#clock div.space {
color: #ccc;
display: block;
line-height: 1.7em;
font-size: 50px;
float: left;
height: 88px;
width: 30px;
}

5. The javascript to enable the countdown.

$(function() {
  var currentDate = new Date();
  $('div#clock').countdown(15 * 24 * 60 * 60 * 1000 + currentDate.valueOf(), function(event) {
    $this = $(this);
    switch(event.type) {
      case "seconds":
      case "minutes":
      case "hours":
      case "days":
      case "weeks":
      case "daysLeft":
        $this.find('span#'+event.type).html(event.value);
        break;
      case "finished":
        $this.fadeTo('slow', .5);
        break;
    }
  });
});

More Examples:

Change logs:

v2.2 (2016-08-05)

  • Add formatter to weeks to finish the month and closes

2015-08-15

  • Add `daysToWeek` property preparing to deprecate the `days` propo that has the same functionality

v2.0.5 (2015-07-25)

  • Fixed bugs.

v2.0.4 (2014-06-04)

  • Fix bower tag

v2.0.3 (2014-05-22)

  • Update indent to 2 tabs
  • Fix linter that wasn't working and update all files
  • Bugs fixed.

v2.0.2 (2013-12-13)

  • Fix pause/continue crash with one countdown instance
  • Add Bower support

v2.0.1 (2013-11-02)

  • Add AMD support
  • Fix bug that call finish 2sec earlier
  • Fix bug when send miliseconds has a string was not parsed
  • Add the strftime formatter
  • Add support for jQuery callback style
  • Add grunt tools
  • Better docs and examples

This awesome jQuery plugin is developed by hilios. For more Advanced Usages, please check the demo page or visit the official website.