asked on

Modify JS Script to Treat Timer as Object, and Interact with Other Timers on Page

How would the following script (thanks to Expert hielo) be modified to easily have any number of these stopwatches running at once on a form page?
The goal is to allow multiple projects to be timed (but only one at a time), so clicking the Start button on any of the clocks would automatically make any other clock stop running.
For example, if stopwatch 1 is running, and then I click "Start" on Stopwatch 2, then clock #1 should automatically stop and the button for # 1 should automatically change to say "Start" so it can be started later. Meanwhile, # 2 runs until some other clock's button is clicked.

<html>
<head>
<title>Javascript Stopclock</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script LANGUAGE="JavaScript">
 var timerRunning = false;
 var timerID = null;
// create instance of Date object representing current time
 var initial = new Date();
 
// start timer
 function start_clock() {      
        // set the button's label to "stop"     
                document.forms['clock'].general.value = "stop";        
        // assign the stop function reference to the button's onClick event handler     
                document.forms['clock'].general.onclick = stop;        
       
		initial=new Date();
		if( document.forms['clock'].displayScreen.value )
		{
			var t1 = 
 
String(document.forms['clock'].displayScreen.value).split(".");
			var t2 = t1[0].split(":");
			initial.setSeconds( initial.getSeconds() - parseInt(t2[2]) );
 
			t1=t2=null;
		}	
        // assign milliseconds since 1970 to global variable    
                startTime = initial.getTime();   
        // make sure the timer is stopped       
                stopTimer(); 
        // run and displayScreen timer        
                showTimer();
}
 
// set button to initial settings
function stop() {
        // set the button's label to "start"    
                document.forms['clock'].general.value = "start";       
        // assign the start_clock function reference to the button's onClick event handler   
 
 
                document.forms['clock'].general.onclick = start_clock;       
        // stop timer   
                stopTimer();
}
        // stop timer
function stopTimer() {  
        // if the timer is currently running    
                if (timerRunning)               
        // clear the current timeout (stop the timer)           
                clearTimeout(timerID)   
        // assign false to global variable because timer is not running 
                timerRunning = false
}
 
function showTimer() {  
        // create instance of Date representing current timer   
               var current = new Date(); 
 
        // assign milliseconds since 1970 to local variable     
                var curTime = current.getTime(); 
        // assign difference in milliseconds since timer was cleared    
                var dif = curTime - startTime;           
        // assign difference in seconds to local variable       
                var result = dif / 1000; 
        // is result is not positive    
                if (result < 1)         
        // attach an initial "0" to beginning           
                result = "0" + result;           
        // convert result to string     
                result = result.toString();
			 var hrs = parseInt(result/3600);
			 var mins = parseInt(result/60);
			 var secs = (result%1000);
			 hrs = (hrs < 10) ? "0" + hrs: hrs;
			 mins = (mins < 10) ? "0" + mins: mins;
			 secs = String(secs).split(".");
			 var secs = (parseInt(secs[0]%60) < 10) ? "0" + secs[0]%60 : 
 
secs[0]%60;
        // place result in text field   
                document.forms['clock'].displayScreen.value = hrs+":"+mins+":"+secs;   
 
        // call function recursively immediately (must use setTimeout to avoid overflow)     
 
   
                timerID = setTimeout("showTimer()", 0);  
        // timer is currently running   
                timerRunning = true;
}
</script>
</head>
 
<body bgcolor="#FFFFFF" text="#000000">
<form name="clock">
 <input TYPE="text" NAME="displayScreen" value="00:00:00"
 onFocus="this.blur()" size="20">
 <input TYPE="button" NAME="general" VALUE="start"  onClick="start_clock();">
</form>
 
</body>
</html>