Modern Repeating Countdown Timer App In jQuery
File Size: | 4.12 KB |
---|---|
Views Total: | 3599 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A modern countdown timer app that counts down to a specified date, in a loop or not.
Features:
- Countdown with limit date: Countdown with limit date allows you to select the target date, and it will stop when the countdown reaches zero.
- Countdown with repeat: Countdown with repeat, allows you to type the number of days you want to countdown. Once the counter reaches zero it will start over.
How to use it:
1. Load the latest jQuery library and other required resources in the document.
<link rel="stylesheet" href="/path/to/css/style.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/js/app.js"></script>
2. Code the HTML for the countdown timer.
<div class="container"> <div class="options"> <div class="limit"> <button class="limit-button">Countdown with limit date</button> <p> <small> Countdown with limit date allows you to select the target date, and it will stop when the countdown reaches zero. </small></p> </div> <div class="repeat"> <button class="repeat-button">Countdown with repeat</button> <p> <small> Countdown with repeat, allows you to type the number of days you want to countdown. Once the counter reaches zero it will start over. </small></p> </div> </div> <div class="form"> <form> <button class="begin" type="submit">Start Countdown</button> </form> </div> <div class="wrapper"> <div class="item"> <div class="number"> <span id="days"> 00 </span> </div> <span>Days</span> </div> <div class="item"> <div class="number"> <span id="hours"> 00 </span> </div> <span>Hours</span> </div> <div class="item"> <div class="number"> <span id="minutes"> 00 </span> </div> <span>Minutes</span> </div> <div class="item"> <div class="number"> <span id="seconds"> 00 </span> </div> <span>Seconds</span> </div> </div> </div>
This awesome jQuery plugin is developed by ErikaEspejo. For more Advanced Usages, please check the demo page or visit the official website.