In my consulting business, I often have to switch my attention between different projects. Unless I keep good notes, it can be difficult to figure out at the end of the day how much time I spent on each one. So I developed this little stopwatch application that you can download below. It lets you create as many independent stopwatches as you want on a single page, then start and stop them as appropriate.
To keep track of what each clock represents, they each contain an edit field for a description. And if you forgot to start the clock, you can adjust the time whenever it is stopped by typing over the clockface’s value. When you restart it, whatever is in the clockface will be parsed. If it contains a string that matches the pattern H:M:S, those values will be used to compute the initial time on the clock. You’re not limited to 60 minutes/seconds or 24 hours either. For instance, if you want to start with a value of 110 minutes, you can type either 0:110:0, or 1:50:0. On the first update, the value will be converted into the usual time notation.
You can see a demo of this application, or feel free to use it at that URL as often as you like. You can also embed a timeclock in any web page simply by including a reference to timeclock.js and executing the following JavaScript snippet:
new TimeClock(elem)
where elem is a DOM Element that is to be the parent element of the new clock. You can style the clock in CSS using the classes that are applied to each of the clock’s elements:
.tc-timeclock /* the clock's outer box */
.tc-close /* the 'X' box for closing the clock */
.tc-descr /* the description edit field */
.tc-face /* the clockface */
.tc-start /* the Start button */
.tc-reset /* the Reset button */
See timeclock.css for some examples.
Tested with Google Chrome 0.3.154.9, Mozilla Firefox 3.0.1, Opera 9.2.5, Safari 3.1.2, and Internet Explorer 7.
Here’s a Windows desktop version written in C#, if that suits your style better.
