Click here to Skip to main content
15,867,771 members
Articles / Web Development / XHTML
Article

JavaScript Stopwatch

Rate me:
Please Sign up or sign in to vote.
4.17/5 (8 votes)
14 Sep 2008CPOL2 min read 118.5K   2.9K   17   12
A simple stopwatch object using JavaScript.

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:

JavaScript
function StopWatch(){
}//yes this is how to define a class in JavaScript 

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.

JavaScript
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.

JavaScript
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.

JavaScript
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.

JavaScript
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.

JavaScript
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:

JavaScript
var _StopWatch = new StopWatch();

To start the stopwatch, you simply call Start.

JavaScript
_StopWatch.start();

To stop the stopwatch, you simply call Stop.

JavaScript
_StopWatch.stop();

To get the duration, you simply call Duration.

JavaScript
alert(_StopWatch.duration());
//example return: 3.567(seconds)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
United States United States
Ah, just another dev living the life of Dilbert. Smile | :)

Comments and Discussions

 
SuggestionTo use as a node.js module Pin
silverlokk21-May-20 20:58
silverlokk21-May-20 20:58 
SuggestionMatter of style on boolean expressions Pin
silverlokk19-May-20 2:55
silverlokk19-May-20 2:55 
QuestionHow to make available on web page? Pin
Anne_Arbor29-Mar-13 9:52
Anne_Arbor29-Mar-13 9:52 
QuestionExpansion on this idea Pin
Olaberas22-Mar-13 11:57
Olaberas22-Mar-13 11:57 
Questionreading the duration(ie elapsed) time at any time Pin
jduartedj13-Dec-11 6:51
jduartedj13-Dec-11 6:51 
GeneralAdding pause / lap time functionality Pin
jsc4216-Sep-08 0:41
professionaljsc4216-Sep-08 0:41 
GeneralRe: Adding pause / lap time functionality Pin
MCF.Goodwin16-Sep-08 0:55
MCF.Goodwin16-Sep-08 0:55 
GeneralRe: Adding pause / lap time functionality Pin
jsc4216-Sep-08 2:07
professionaljsc4216-Sep-08 2:07 
Generalsmall error Pin
mihasic15-Sep-08 2:22
mihasic15-Sep-08 2:22 
GeneralRe: small error Pin
MCF.Goodwin15-Sep-08 3:00
MCF.Goodwin15-Sep-08 3:00 
GeneralRe: small error Pin
leegool15-Sep-08 4:33
leegool15-Sep-08 4:33 
GeneralRe: small error Pin
MCF.Goodwin15-Sep-08 4:54
MCF.Goodwin15-Sep-08 4:54 
Yep, small typo that might have caused negated durations if not fixed, thanks for that. Latest download has this fix.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.