Simple Versatile jQuery Timer Plugin - Workout Timer

Workout Timer is a simple yet multi-functional jQuery plugin used to create countup timers, countdown timers, interval timers, repeating timers with sound effects for your web applications.

Basic usage:

1. Download the plugin and include the jquery.workout-timer.css and jquery.workout-timer.js on the webpage which has jQuery library installed.

<link rel="stylesheet" href="jquery.workout-timer.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/jquery.workout-timer.js"></script>

2. The markup to create a default count-up timer with custom controls.

<div class="workout-timer" data-duration="20" data-sound="bell_ring">
  <div class="workout-timer__counter" data-counter></div>
  <div class="workout-timer__play-pause" data-control="play-pause" data-paused="true"></div>
  <div class="workout-timer__reset" data-control="reset"></div>
  <div class="workout-timer__repetitions" data-repetitions>Repetitions</div>
  <div class="workout-timer__volume" data-control="volume"></div>
</div>

3. The markup to create a countdown timer with custom controls.

<div class="workout-timer" data-countdown="true" data-duration="60" data-sound="bell_ring">
  <div class="workout-timer__counter" data-counter></div>
  <div class="workout-timer__play-pause" data-control="play-pause" data-paused="true"></div>
  <div class="workout-timer__reset" data-control="reset"></div>
  <div class="workout-timer__repetitions" data-repetitions>Repetitions</div>
  <div class="workout-timer__volume" data-control="volume"></div>
</div>

4. The markup to create an interval countdown timer with custom controls.

<div class="workout-timer" data-countdown="true" data-duration="20" data-duration2="10" data-repetitions="3" data-sound="bell_ring">
  <div class="workout-timer__counter" data-counter></div>
  <div class="workout-timer__play-pause" data-control="play-pause" data-paused="true"></div>
  <div class="workout-timer__reset" data-control="reset"></div>
  <div class="workout-timer__repetitions" data-repetitions>Repetitions</div>
  <div class="workout-timer__volume" data-control="volume"></div>
</div>

5. The markup to create a repeating countdown timer with custom controls.

<div class="workout-timer" data-countdown="true" data-duration="20" data-repetitions="3" data-sound="bell_ring">
  <div class="workout-timer__counter" data-counter></div>
  <div class="workout-timer__play-pause" data-control="play-pause" data-paused="true"></div>
  <div class="workout-timer__reset" data-control="reset"></div>
  <div class="workout-timer__repetitions" data-repetitions>Repetitions</div>
  <div class="workout-timer__volume" data-control="volume"></div>
</div>

6. Register sound effects.

$.WorkoutTimer.registerSound({
  path: "audio/",
  name: "bell_ring"
});

7. You can also override the default options in JavaScript instead of using data attributes.

$('.workout-timer').workoutTimer({
  countdown: false,
  autostart: false,
  duration: 10,
  duration2: 0,
  repetitions: 0,
  sound: null,
});

8. Callback events available.

$('.workout-timer').workoutTimer({
  onPlay: function() {},
  onPause: function() {},
  onRestart: function() {},
  onRoundComplete: function() {},
  onComplete: function() {}
});

---

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