Double StopWatch 2

Kinika Tasie-Amadi Aug 7, 2002

This script uses two stopwatches,one in seconds and one in ms. You can take snapshot of the time (while counting continues in the background). Based on high-quality easy-to-use javascript class. Works in most browsers.

The JavaScript Source: Math Related: Double StopWatch

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- THREE STEPS TO INSTALL DOUBLE STOPWATCH:

1.  Copy the coding into the HEAD of your HTML document

2.  Add the onLoad event handler into the BODY tag

3.  Put the last coding into the BODY of your HTML document  -->

<HEAD>

<!-- Begin

///////////////////////////////////////////////////////////////////////////////////////////////////

// CLASS StopWatch

// static vars - required to use setTimeout() and for onclick handlers

var StopWatch_stopWatches = new Array();

var StopWatch_count       = 0;

///////////////////////////////////////////////////////////////////////////////////////////////////

// constructor

function StopWatch(form,timeField,buttonA,buttonB,unit)	  // unit "s"|"ms"

{

// declare public functions

this.start     = StopWatch_start;    // start()

this.stop      = StopWatch_stop;     // stop()

this.snapshot  = StopWatch_snapshot; // snapshot()

this.reset     = StopWatch_reset;    // reset()

this.resume    = StopWatch_resume;   // resume() : should be continue() but continue is a reserved word

// declare private functions

this.setState  = StopWatch_setState; // (bRefresh,buttonA_value,buttonB_value)

this.run       = StopWatch_run;      // run(type) : type is any button value, i.e. type = Start|Stop|Snapshot|Reset|Continue

this.now       = StopWatch_now;      // now()

this.refresh   = StopWatch_refresh;  // refresh()

// note static functions - (index) is index of this stopwatch (in StopWatch_stopWatches)

//  StopWatch_Static_update(index)	// is static because it is called by setTimeout()

//  StopWatch_Static_runA(index)		// is static because it is called by onclick handler (buttonA)

//  StopWatch_Static_runB(index)		// is static because it is called by onclick handler (buttonB)

// declare (private) variables

this.timeField = form.elements[timeField];

this.buttonA   = form.elements[buttonA];

this.buttonB   = form.elements[buttonB];

this.index     = StopWatch_count++;

this.unit      = unit;

this.tStarted  = 0;  					// start time of counting

this.bRefresh  = false;       		// whether or not to update time field

// other constructions

this.timeField.value = "0";			// init form elements

this.buttonA.value   = "Start";

this.buttonB.value   = "Reset";

this.buttonA.onclick = new Function("","StopWatch_Static_runA("+this.index+")");

this.buttonB.onclick = new Function("","StopWatch_Static_runB("+this.index+")");

StopWatch_stopWatches[this.index] = this;  // add this to static var

StopWatch_Static_update(this.index);	     // 'spawn' timer (runs throughout)

}

///////////////////////////////////////////////////////////////////////////////////////////////////

// public functions

function StopWatch_start()

{

var startTime   = new Date();

switch (this.unit) {		// start from time in edit field

case "ms":    startTime.setTime(this.now() - this.timeField.value);        break;		// milliseconds

case "s":     startTime.setTime(this.now() - this.timeField.value*1000);   break;		// seconds

} // switch

this.tStarted        = startTime.getTime();

this.resume();

}

function StopWatch_stop()		{ this.setState(false, "Start", "Reset");    }

function StopWatch_snapshot()   { this.setState(false, "Stop",  "Continue"); }

function StopWatch_reset()      { this.setState(false, "Start", "Reset");  this.timeField.value = "0"; }

function StopWatch_resume()     { this.setState(true,  "Stop",  "Snapshot"); }

///////////////////////////////////////////////////////////////////////////////////////////////////

// static functions

function StopWatch_Static_update(index)

{

var stopWatch = StopWatch_stopWatches[index];

setTimeout("StopWatch_Static_update("+index+")", 50);

if (stopWatch.bRefresh)

stopWatch.refresh();

}

function StopWatch_Static_runA(index)

{

var stopWatch = StopWatch_stopWatches[index];

stopWatch.run(stopWatch.buttonA.value);

}

function StopWatch_Static_runB(index)

{

var stopWatch = StopWatch_stopWatches[index];

stopWatch.run(stopWatch.buttonB.value);

}

///////////////////////////////////////////////////////////////////////////////////////////////////

// private functions

function StopWatch_setState(bRefresh,buttonA_value,buttonB_value)

{

this.bRefresh        = bRefresh;

this.buttonA.value   = buttonA_value;

this.buttonB.value   = buttonB_value;

}

function StopWatch_run(type)

{

if (type=="Continue")

this.resume();

else

eval("this."+type.toLowerCase()+"()");

}

function StopWatch_now()

{

var timeNow = new Date();

return timeNow.getTime();

}

function StopWatch_refresh()

{

var tElapsed = this.now() - this.tStarted;

switch (this.unit) {

case "ms":    this.timeField.value = tElapsed;                   break;		// milliseconds

case "s":     this.timeField.value = Math.floor(tElapsed/1000);  break;		// seconds

} // switch

}

//  End -->

</script>

</HEAD>

<b>Stopwatch 1:</b> <input type="text" name="time1" size="5" style="text-align:right"> ms <br>

</p>

<b>Stopwatch 2:</b> <input type="text" name="time2" size="5" style="text-align:right"> s  <br>

</p>

</form>

<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>

by <a href="http://javascriptsource.com">The JavaScript Source</a></font>

</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Double StopWatch 2

Leave a Response

Attention JavaScript Coders

Go Deeper