jQuery Stopwatch Widget
This widget allows you to quickly and easily add a stopwatch to your page. It's great for invoicing software, project management applications, quizzes— anywhere that you need to track time.
Next, inside of your document, where you would like the stopwatch to be placed, insert a container DIV.
Now, at the end of your document, just before the closing BODY tag, initialize the stopwatch.
The stopwatch widget includes 10 CSS3 themes (
theme-10). These themes are designed to work in modern browsers and should work in older versions of IE when a polyfill such as modernizr is used.
If you wish to create your own theme, you have a couple of options:
- Create the new theme and pass it to the
.stopwatch()function when you initialize the stopwatch.
- Create a theme in your own CSS that simply references your
#myStopwatchdiv and its child elements, passing a blank string in the
Creating a theme is fairly straightforward. Below is the generated HTML that the stopwatch widget creates, for your reference. More information about theme structure can be found at the top of the
<div id="myStopwatch" class="stopwatch theme-1"> <div class="the-time"> <span class="hr">00</span< <span class="min">00</span< <span class="sec">00</span< </div> <a href="" class="start-stop">Start</a> <a href="" class="reset">Reset</a> </div>
Note that you can also include multiple instances of the stopwatch widget on a single page. For instance:
If you're initializing all stopwatches with the same theme, you can combine selectors:
Or give them a shared class name: