Extremely Lightweight jQuery Countdown Timer Plugin - downCount

File Size: 4.21KB
Views Total: 80477
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Extremely Lightweight jQuery Countdown Timer Plugin - downCount

downCount is a lightweight and fast jQuery plugin which helps you create a countdown timer with custom alert text and timezone support.

How to use it:

1. Create the html for the timer

<ul class="countdown">
<li> <span class="days">00</span>
<p class="days_ref">days</p>
</li>
<li class="seperator">.</li>
<li> <span class="hours">00</span>
<p class="hours_ref">hours</p>
</li>
<li class="seperator">:</li>
<li> <span class="minutes">00</span>
<p class="minutes_ref">minutes</p>
</li>
<li class="seperator">:</li>
<li> <span class="seconds">00</span>
<p class="seconds_ref">seconds</p>
</li>
</ul>

2. The CSS for the countdown timer

<style type="text/css">
ul.countdown {
list-style: none;
margin: 75px 0;
padding: 0;
display: block;
text-align: center;
}
ul.countdown li {
display: inline-block;
}
ul.countdown li span {
font-size: 80px;
font-weight: 300;
line-height: 80px;
}
ul.countdown li.seperator {
font-size: 80px;
line-height: 70px;
vertical-align: top;
}
ul.countdown li p {
color: #a7abb1;
font-size: 14px;
}
</style>

3. Include jQuery library and jQuery downCount plugin on the web page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.downCount.js"></script> 

4. The javascript

<script class="source" type="text/javascript">
$('.countdown').downCount({
date: '09/09/2014 12:00:00',
offset: +10
}, function () {
alert('WOOT WOOT, done!');
});
</script>

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