Extremely Lightweight jQuery Countdown Timer Plugin - downCount
| File Size: | 4.21KB |
|---|---|
| Views Total: | 80619 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.










