This time I will share jQuery Plugin and tutorial about Easy Digital Countdown Clock Plugin With jQuery, hope it will help you in programming stack.
countdown-timer.js is a very small jQuery plugin for creating an easy-to-style digital clock to count down from a specific date on your coming soon/under construction pages and event landing pages.
How to use it:
1. Create an empty element for the countdown timer plugin.
1 |
<div class="timer" id="countdown"></div> |
2. Download and include the countdown-timer.js plugin after jQuery library (slim build is recommended):
1 |
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script> |
2 |
<script src="countdown-timer.js"></script> |
3. The JavaScript to render a countdown timer in the container element you just created.
1 |
var myDate = new Date(); |
2 |
myDate.setDate(myDate.getDate() + 2); |
3 |
$("#countdown").countdown(myDate, function (event) { |
6 |
'<div class="timer-wrapper"><div class="time">%D</div><span class="text">days</span></div><div class="timer-wrapper"><div class="time">%H</div><span class="text">hrs</span></div><div class="timer-wrapper"><div class="time">%M</div><span class="text">mins</span></div><div class="timer-wrapper"><div class="time">%S</div><span class="text">sec</span></div>' |
4. Style the countdown timer using your own CSS styles.
07 |
.timer .timer-wrapper { |
08 |
display: inline-block; |
13 |
.timer .timer-wrapper .time { |
19 |
.timer .timer-wrapper .text { |
21 |
color: rgba(255, 255, 255, 0.6); |
This awesome jQuery plugin is developed by shibulijack. For more Advanced Usages, please check the demo page or visit the official website.
