The objective
I know there are a lot of examples on the web on how to achieve stopwatch type functionality, but none seemed to be separated from the UI, so I decided to write my own object that could be included into any page without being tied into the user interface.
The goal
To create a JavaScript stopwatch that will work similar to the .NET StopWatch
class. The object should not depend on any UI element, and should be added as easily as possible to any web page.
The code
Constructor
I first created the JavaScript object as follows:
function StopWatch(){
}
Variables
The next step was to sort out what variables would be needed to accomplish our task. We know we need timestamps for when we start and when we stop, and a state variable to determine if we are currently running.
function StopWatch(){
var startTime = null;
var stopTime = null;
var running = false;
....
}
Methods
Now, the methods; we know we will need methods to start, stop, and set the duration. I know some implementations of stopwatches containing reset methods, but in this implementation, let’s infer the call to start to also be the reset.
TimeStamp method
I needed a private method in my object to return the timestamp for a given point in time. The getTime
function of a Date
object returns the number of milliseconds since Jan 1, 1970.
function getTime(){
var day = new Date();
return day.getTime();
}
Start method
The call to start should verify that we are not already running, and should set the startTime
variable.
this.start = function(){
if (running == true)
return;
else if (startTime != null)
stopTime = null;
running = true;
startTime = getTime();
}
Stop method
The call to stop should verify we are currently running, and should set the stopTime
variable.
this.stop = function(){
if (running == false)
return;
stopTime = getTime();
running = false;
}
Duration method
This method should determine we have both a start and stop timestamp, and return the duration between the two, in terms of seconds.
this.duration = function(){
if(startTime == null || stopTime == null)
return 'Undefined';
else
return (stopTime - startTime) / 1000;
}
Using the stopwatch object
To use the object, you need to include the StopWatch.js file or its logic into your own .js file, and create an instance of a StopWatch
as follows:
var _StopWatch = new StopWatch();
To start the stopwatch, you simply call Start
.
_StopWatch.start();
To stop the stopwatch, you simply call Stop
.
_StopWatch.stop();
To get the duration, you simply call Duration
.
alert(_StopWatch.duration());