Web Time Tracker

  • in
  • javascript

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:

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

Timetracker format

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>

Author

This jQuery plugin is open-sourced by Agilie Team

Related Post

thumbnail
hover

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

thumbnail
hover

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

thumbnail
hover

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