Country
    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
    GOBUTTON Plugin. Diversify the Waiting Process
    Usually, people don’t like to wait and do “nothing”....
    Our New Lightweight Open-source Library
    An article about our new Lightweight open-source library