asked on

Multiple JS Stopwatches on One Page: Accurate Pause of Timers; and Automatic Stop of Others When Any One Is Started

This JS object in the code snippet makes it easy to have multiple Javascript stopwatches on a page.
But there is a timing problem. It loses several seconds when restarting after a pause.
For example, when I paused this one at 36 seconds, it restarted at only 21 seconds.
When I stopped it at 2:02 , it restarted at 1:43.
(By the way, there is another JS stopwatch script that seems to have accurate pause/resume display, at http:Q_23109318.html ID:20756902, but it is not designed as an object to easily make multiple stopwatches on one page. But there might be some technique in it useful for fixing the timing problem in the script here.)

Also, it is possible to make all other clocks stop (and their buttons change to say "Start") when any one clock is started? For example, if Clock 1 is running, and then I click "Start" for Clock 3, then Clock 1 should pause and its button should turn to "Start". (And although there should never be multiple clocks running, it probably should check to make sure *all* other clocks are stopped and their buttons say "Start", when any one clock's Start button is clicked.)

<html>
<head>
<title>Multiple Javascript Stopwatches</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function Timer(name,box){
 function startTimer(){
  this.d=new Date
  this.interval=setInterval(this.name+'.displaytimer()',1000)
 }
 
 function displaytimer(){
  now=new Date()
  secs=Math.round((now.getTime()-this.d.getTime())/1000)+this.seconds
  mins = parseInt(secs/60)
  secs -=(mins*60);
  document.getElementById(this.box+'Mins').value=(mins<10)?"0"+mins:mins;
  document.getElementById(this.box+'Secs').value=(secs<10)?"0"+secs:secs;
 }
 
 function reset(){
  clearInterval(this.interval)
  this.seconds=0
  document.getElementById(this.box).value=0
 }
 
 function stop(){
  this.seconds=Math.round((now.getTime()-this.d.getTime())/1000)
  clearInterval(this.interval)
  this.interval='null'
 }
 
 function restart(){
  if (this.interval=='null'){
   this.d=new Date
   this.interval=setInterval(this.name+'.displaytimer()',1000)
 }
}
 
 this.start=startTimer
 this.displaytimer=displaytimer
 this.stop=stop
 this.reset=reset
 this.restart=restart
 this.seconds=0
 this.name=name
 this.box=box
}
 
timer1=new Timer('timer1','timer1box')
//timer2=new Timer('timer2','timer2box')
//timer3=new Timer('timer3','timer3box')
</script>
 
<body>
 
 <input id="timer1boxMins" value="0" size="3" style="font-size:16;border:2px solid red;text-align:right">:
 <input id="timer1boxSecs" value="0" size="3" style="font-size:16;border:2px solid red;text-align:right"><br>
 <input type="button" value="start" 
 onclick="if (this.value=='start') { timer1.start(); this.value='stop'} else {timer1.stop(); this.value='start'}">
 <input type="button" value="reset" onclick="timer1.reset();"><br><br> 
 
 
 <input id="timer2boxMins" value="0" size="3" style="font-size:16;border:2px solid red;text-align:right">:
 <input id="timer2boxSecs" value="0" size="3" style="font-size:16;border:2px solid red;text-align:right"><br>
 <input type="button" value="start" 
 onclick="if (this.value=='start') { timer2.start(); this.value='stop'} else {timer2.stop(); this.value='start'}">
 <input type="button" value="reset" onclick="timer2.reset();"><br><br>  
 
 
 <input id="timer3boxMins" value="0" size="3" style="font-size:16;border:2px solid red;text-align:right">:
 <input id="timer3boxSecs" value="0" size="3" style="font-size:16;border:2px solid red;text-align:right"><br>
 <input type="button" value="start" 
 onclick="if (this.value=='start') { timer3.start(); this.value='stop'} else {timer3.stop(); this.value='start'}">
 <input type="button" value="reset" onclick="timer3.reset();"><br><br> 
 
</body>
</html>

Open in new window

HonorGod

Apparent duplicate:
https://www.experts-exchange.com/questions/23117375/Modify-JS-Script-to-Treat-Timer-as-Object-and-Interact-with-Other-Timers-on-Page.html

HonorGod

By "apparent duplicate" I mean that the answer that I provided in that other question appears to resolve/answer the things specifically requested here.

Does that count as a duplicate, or not?

FrankTech

ASKER

Yes, this seems to be a duplicate, for all practical purposes, although the underlying script was different. But the script underlying http:Q_23117375.html is better, and so far your solution looks good (I'm still testing.)
So this question could be treated as a duplicate, so I'll probably ask CS to delete it.

FrankTech

ASKER

b0lsc0tt,
I did not intend to post a duplicate. It actually is a different question (and it was posted about 10 hours earlier than the one HonorGod answered). Although similar to the 2nd, it dealt with modifying a different JS script.
Although the underlying scripts were different, the solution that HonorGod provided in http:Q_23117375.html has the practical effect of solving this one also - because they achieve the same overall goal.
So I don't mind if HonorGod posts the other solution here because the questions are different but the answer could work in both. Thanks.

ASKER CERTIFIED SOLUTION

HonorGod

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

FrankTech

ASKER

Thanks!

FrankTech

ASKER

b0lsc0tt,
I'm trying to accept HonorGod's answer, but the sysem says I can't accept it. Please help. Thanks.

FrankTech

ASKER

b0lsc0tt,
Sorry; disregard my last comment. I guess it has already been accepted. Thanks.

HonorGod

Thanks Frank. I appreciate the grade / points.

I hope that you find this information useful.

Have a great day.

Ziggie013

This freakin rocks. Thanks HonorGod! I wish I could give you points for this solution too!!!

HonorGod

Ziggie013... Thanks

b0lsc0tt

>> I wish I could give you points for this solution too!!! <<
Did you click the Yes button/link in the "Was this helpful" part of the comment HonorGod posted? It won't give points but does have an effect and will help recognize the expert's contribution. Just one click please (*L*) but it is a great way to reward him.
bol

Ziggie013

I didn't know about that button, thank you.

Clicked and Rated. Excellant!