Web Time Tracker

Plugin named Timetracker is a time counter that works in both increase and decrease directions. It can be embedded in websites and used as a timer, tracker, counting down tool and in any other situation where you need to control elapsed time (for example, during online testing). Timetracker plugin can be adapted to any web resource and designed in accordance with the website style. For initialization, use the command:


The default interval is 1 second, the display format is in minutes and seconds. To customize time format use “format” field during initialization:

$('.timetracker').timetracker({'format': 'i:s'});

How to use plugin

To specify when you want to stop the countdown, use the setting timestop (in seconds):

$('.timetracker').timetracker({'timestop': 15})

The parameter “countdown” allows you to specify the counting direction, and the parameter “timestop”, in seconds, specifies the moment when the count should be stopped or resumed.

$('.timetracker').timetracker({'countdown': true, 'timestop': 60});

To guide the tracker, there are a number of events that allow you to start or stop counting and return to the original state.


You can assign your handler to process the timer stop event:

   'timestop': 5,
   'format': 'i:s',
   'stop': function() {
       alert('The timer stopped');

Example of tracker usage

Here we can show you an example of tracker usage:

<!DOCTYPE html>
<html lang="en">
   <meta charset="UTF-8">
   <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
   <script src="../app/js/time-tracker.js"></script>
   <span class='timetracker'></span>
   <button onClick="javascript:$('.timetracker').timetracker('start');">start</button>
   <button onClick="javascript:$('.timetracker').timetracker('stop');">stop</button>
   <button onClick="javascript:$('.timetracker').timetracker('reset');">reset</button>
       $('.timetracker').timetracker({'timestop': 15, 'format': 'i:s', 'countdown': true});

Related Post


Animated Toggle Menu

Hi, guys! We’re happy to share our new free open-source Animated Toggle Menu that can be helpful for creating websites. It’s lightweight...


Rails Application Template

Base template for creating Ruby-on-Rails applications Current version: 0.1.2 How to use Download or clone the template Set your ruby version...


jQuery GTM In-Viewport Manager Plugin

A manager of in-viewport events for GTM (Google Tag Manager). We are happy to share with you our new jQuery GTM In-Viewport Manager Plugin a...