Home   →   Blog   →   Timetracker Plugin. Keep Track of Time!

Timetracker Plugin. Keep Track of Time!

The time counter can be a very helpful feature when creating websites as people often have to keep track of time and count it. That’s why we want to offer you our plugin named Timetracker that would be useful in many ways.

Timetracker plugin is a time counter that works in both increase and decrease directions and can be embedded in websites. It is used as a timer, tracker, counting down tool, etc. For instance, it comes in handy during online testing or if you need to track your work time.

Timetracker plugin can be adapted to any web resource and designed in accordance with the website style.

For initialization, use the command:


Timetracker format

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});




Also, you’re welcome to visit this page to learn all the details about Timetracker plugin.

comments powered by Disqus
Cf68cdaaf75f9cd1417267c6b1cafb3813c488a1 Virtual Reality Applications
Augmented reality apps are widely used – from geolocalization to using it in gaming industry. Augmented reality app is a new way to access data determined by environment conditions.
754d17aa02f8c56a0e0b671d45bf2455f6177062 Agile Methodology (Scrum)
Scrum is the very popular agile methodology for managing product development and project delivery. Scrum is the framework that could be applied for the development of product use cases, different projects or entire products.
1a1b621bfd24aba09a56bb25cf18719ad46ef190 News App Development
Smartphones are regularly used everywhere & anytime: in cars, on the way to the office, during the rest on holidays or weekends. That’s very convenient way for users to access important or just fun information with the help of news mobile app.
D63ac21dfd17c4acc93d52d9bdc72fea10e84edd Geolocation Services in Mobile Tracking Software
Geolocation services are used by many mobile apps, websites, mobile operators etc.