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.
