Simple Stopwatch Plugin With jQuery - jsRapStopwatch

File Size: 8.4 KB
Views Total: 773
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Stopwatch Plugin With jQuery - jsRapStopwatch

jsRapStopwatch is a simple, lightning-fast jQuery plugin that creates a stopwatch-style timer on the page.

It keeps counting where you left it before you close the page.

How to use it:

1. Download and include the jsRapStopwatch.js after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jsRapStopwatch.js"></script>

2. Create an empty DIV to hold the stopwatch.

<div id="example"></div>

3. Initialize the plugin to generate a stopwatch that starts at 0 seconds.

  myStopWatch = $('#example').jsRapStopwatch()[0];

4. Create a stopwatch that starts at the specified time.

let d = 'Aug 9, 2000';

5. By default, the stopwatch will stop when the user clicks on the container. You can disable the behavior by setting the enabled parameter to false.

  myStopWatch = $('#example').jsRapStopwatch({ 
    enabled: false 

6. Customize the time names.

  myStopWatch = $('#example').jsRapStopwatch({ 
    timeName: ['y ', 'm ', 'd ', 'h ', 'm ', 's']
// => 26y 6m 10d 10h 34m 12s

7. Callback functions.

  myStopWatch = $('#example').jsRapStopwatch({ 
    onClickBefore: null,
    onClickAfter: null

8. Apply your own CSS styles to the stopwatch.

.rapStopwatch { 
  background: #E5E7EB; 
  padding: 2rem 1rem; 
  border-radius: 5px; 
  margin: 2rem auto; 
  font-size: 1.5rem; 



This awesome jQuery plugin is developed by Thibor. For more Advanced Usages, please check the demo page or visit the official website.