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').timetracker();

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

$('.timetracker').timetracker('start');

$('.timetracker').timetracker('stop');

$('.timetracker').timetracker('reset');

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

$('.timetracker').timetracker({

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

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

  <script src="../app/js/time-tracker.js"></script>

</head>

<body>

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

  <script>

      $('.timetracker').timetracker({'timestop': 15, 'format': 'i:s', 'countdown': true});

  </script>

</body>

</html>

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

Next Posts
7c5a498bcb2ed3c81303f9531c1e0f23889b54e7 GOBUTTON Plugin. Diversify the Waiting Process
Usually, people don’t like to wait and do “nothing”. However, very often it’s inevitable. That's why one needs to make this time as pleasant or at least tolerable as possible. And this is especially true when developing applications, for it's very importa
91167955392cd546c30fe3532e8f41263dacbcdf Our New Lightweight Open-source Library
An article about our new Lightweight open-source library
Notice Our website uses cookies, which are necessary for its functioning and required to achieve the purposes illustrated in the privacy policy. By closing this banner you agree to the use of cookies.