Extremely Lightweight jQuery Countdown Timer Plugin - downCount
File Size: | 4.21KB |
---|---|
Views Total: | 80544 |
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.