Tiny jQuery Countdown Timer Plugin

File Size: 6.45KB
Views Total: 5212
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Tiny jQuery Countdown Timer Plugin

A tiny and easy-to-use jQuery plugin that allows you to create a customizable countdown timer on your web page. It also can be worked with the Moment.js (A JS Date Format & validate Library) to make date manipulation much easier.

Basic Usage:

1. Include jQuery library and jquery.tinytimer.min.js in your html document

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.tinytimer.min.js"></script>

2. Markup

<div id="timer"></div>

3. Call the plugin with custom output format

<script>
var d = new Date('December 25, 2013');
$('#timer').tinyTimer({ from: d, format: '%d Days, %h Hours, %m Minutes, %s Seconds' });
</script>

4. Time Format

%d - days
%h - hours
%m - minutes
%s - seconds

5. Example for working with Moment.js

// 30-minute countdown
var m = moment().add('minutes', 30);
$('#timer').tinyTimer({ to: m.toDate() });

// Hours since the beginning of the week
var m = moment().startOf('week');
$('#timer').tinyTimer({ from: m.toDate(), format: '%H' });

6. Then you can style your countdown timer via CSS

Change Log:

v1.0.4 (2013-03-08)


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