Elapsed Time Javascript Code

Elapsed time javascript code

Script Description:
- Compute and display the elapsed time between "Start" and "Finish" button clicks
Cut-and-paste code inside HEAD section:
- i.e., between <HEAD> and </HEAD> tags of your HTML file

// Javascript to compute elapsed time between "Start" and "Finish" button clicks
function timestamp_class(this_current_time, this_start_time, this_end_time, this_time_difference) { 
		this.this_current_time = this_current_time;
		this.this_start_time = this_start_time;
		this.this_end_time = this_end_time;
		this.this_time_difference = this_time_difference;
		this.GetCurrentTime = GetCurrentTime;
		this.StartTiming = StartTiming;
		this.EndTiming = EndTiming;
	}

//Get current time from date timestamp
	function GetCurrentTime() {
	var my_current_timestamp;
		my_current_timestamp = new Date();		//stamp current date & time
		return my_current_timestamp.getTime();
		}

//Stamp current time as start time and reset display textbox
	function StartTiming() {
		this.this_start_time = GetCurrentTime();	//stamp current time
		document.TimeDisplayForm.TimeDisplayBox.value = 0;	//init textbox display to zero
		}

//Stamp current time as stop time, compute elapsed time difference and display in textbox
	function EndTiming() {
		this.this_end_time = GetCurrentTime();		//stamp current time
		this.this_time_difference = (this.this_end_time - this.this_start_time) / 1000;	//compute elapsed time
		document.TimeDisplayForm.TimeDisplayBox.value = this.this_time_difference;	//set elapsed time in display box
		}

var time_object = new timestamp_class(0, 0, 0, 0);	//create new time object and initialize it

//-->
</script>

Cut-and-paste code inside BODY section:
- i.e., between <BODY> and </BODY> tags of your HTML file

Here is what it does:

Another example with real-world application on timing your visual reflex.

Tutorial of how the code works:
- Programming logic (object-oriented programming):
  - Create the abstract class: timestamp_class as follows:
    - Create data variables associated with timestamp_class:
      - this_current_time
      - this_start_time
      - this_end_time
    - Create methods associated with timestamp_class
  - Instantiate new time_object from timestamp_class
- Run-time logic:
  - Clicking "Start" button invokes time_object.StartTiming() method:
    - This grabs current timestamp from time_object and
    - put a zero in the textbox (to indicate to user the timer has just reset to zero)
  - Clicking "Finish" button invokes time_object.EndTiming() method:
    - This grabs a new timestamp from time_object
    - then compute the time-difference between the 1st timestamp and 2nd timestamp and
    - put the time-difference value in the textbox
- Why program in object-oriented code?
  - No parameter passing is needed – all data variables needed for the computation are self-contained within the time_object.
  - There is only one global variable used, i.e., time_object, which contains everything you need, from data variables to methods (i.e., functions that operate on their own data within the object).
  - That is to say, the time_object knows everything it needs to do with its data without outside help.
  - In fact, no outside help should ever interfere with time_object's internal data manipulation, and should be blocked from doing so.
  - Otherwise it cannot guarantee the integrity of its internal data if someone dinks around with it.
  - Can you imagine what it can do to your elapsed time if someone attempts to change this_start_time value accidentally from the outside?
  - This is why writing in object-oriented code can provide some guarantee of data integrity and security.
- Usage:

Home Page | Javascript Resources | php Resources