2 Demos of jQuery stopwatch/timer plug-in for any HTML element

The timer plug-in

The timer.jquery plug-in is a simple solution for adding a timer or stopwatch inside any HTML element. The minified version is the only 7K size that you need to include before the body closing tag.

The timer is customizable by using the options provided for the plug-in while a user may start, pause, and resume the timer at any time. Multiple timers can be added in a single page.

Demo1 Demo2
Developer’s page Download plug-in

Installing the timer plug-in

You may install the plug-in by bower:

bower install timer.jquery

The plug-in can also be referred directly from the CDN:

https://cdnjs.cloudflare.com/ajax/libs/timer.jquery/0.6.5/timer.jquery.min.js

Alternatively, download the plug-in from the GitHub website by the above-provided link and include the JS file before the jQuery file:

<script src=’js/timer.jquery/timer.jquery.js’></script>

Adjust the path as per your directory structure.

The markup:

Use an input type text and refer its class in the jQuery code, for example:

You may also use it in other HTML elements.

See the demo below along with jQuery code and complete markup.

A demo of timer plug-in

After opening the demo page by clicking the link or image below, press the “Start” button. The timer will start in the textbox and you can see buttons to Pause or Remove the timer as well:

jQuery timer

See online demo and code

The markup:

 

Get the complete code from the demo page.

An example of executing a function after certain duration

After a certain duration, you may execute a function. For that, you may use the duration option to specify the interval. After that, the specified action can be performed by using the callback function.

In the demo, an alert will display after five seconds as you click the button:

jQuery timer duration

See online demo and code

The script:

 

 

For more about this plug-in, visit the developer’s page.