Easy Digital Countdown Timer Plugin For jQuery - simpleTimer

simpleTimer is super tiny jQuery plugin used to generate a simple countdown timer widget that is easy to style using your own CSS and has callback functions support.

How to use it:

1. Build the html structure for the countdown timer. In this case, we're going to count down from a given datetime in days, hours, minutes, seconds and even milliseconds.

<div class="simple-timer">
  <span class="timer-day">00</span>
  <label class="separator">:</label>
  <span class="timer-hour">00</span>
  <label class="separator">:</label>
  <span class="timer-minute">00</span>
  <label class="separator">:</label>
  <span class="timer-second">00</span>
  <span class="timer-millisecond">0</span>
</div>

2. Create a control button to pause/resume the countdown timer.

<button id="pause_btn">Pause</button>

3. Include jQuery library and the jQuery simpleTimer plugin on the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="simpletimer.js"></script>

4. Initialize the plugin and specify the datetime you'd like to countdown from.

$('.simple-timer').simpletimer({
  day: 1,
  dayDom: '.timer-day',
  hour: 0,
  hourDom: '.timer-hour',
  minute: 0,
  minuteDom: '.timer-minute',
  second: 5,
  secondDom: '.timer-second',
  millisecond: 0,
  millisecondDom: '.timer-millisecond',
  pause: '#pause_btn'
});

5. Apply you own CSS styles to the countdown timer.

.simple-timer {
  ...
}

.timer-day {
  ...
}

..

6. Callback functions available.

$('.simple-timer').simpletimer({
  pauseFun: '', // when paused
  goonFun: '', // when resumed
  endFun: '', // when finished
});

---

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