Timer Examples

Default (Countup) Timer

Counts up to a specified end time

Repetitions

Code example:

<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>

Indefinite Countup Timer

Counts up indefinitely

Repetitions

Code example:

<div class="workout-timer" data-repetitions="-1" 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>

Countdown Timer

Counts down once from a starting point to zero

Repetitions

Code example:

<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>

Repeating Countdown Timer

Counts down from a starting point to zero for a set number of repetitions

Repetitions

Code example:

<div class="workout-timer" data-countdown="true" data-duration="20" data-repetitions="3" data-sound="door_bell">
    <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>

Double Interval Countdown Timer

Counts down from a starting point to zero, then counts down from a second starting point to zero, for a set number of repetitions

Repetitions

Code example:

<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>

Countdown Timer with Events

Shows how you can bind code to start, pause, restart, roundComplete, and complete events.

Repetitions

Code example:

// Define a function or functions to handle timer events.
var $eventLog = $('#event-log');
var logEvent = function(eventType, eventTarget, timer) {
    var newLog = '"' + eventType + '" event triggered on #' + eventTarget.attr('id') + '\r\n';
    $eventLog.val( newLog.concat( $eventLog.val() ) );
};

// Pass in event handlers as part of the options object
$('.workout-timer-events').workoutTimer({
    onStart: logEvent,
    onRestart: logEvent,
    onPause: logEvent,
    onRoundComplete: logEvent,
    onComplete: logEvent
});

The target function receives three parameters:

eventType {String}: The name of the event received
eventTarget {jQuery}: The jQuery object that was the target of this event, e.g. the root element of the timer.
timer {WorkoutTimer}: A reference to the workout timer that threw this event.