Timestamp/Stopwatch

gotchaman
gotchaman used Ask the Experts™
on
I need to create a web page you can timestamp a clock everytime I click a button. So I can use the timestamp sheet later for develping audio synchronized slides.

1. When you hit a start button a clock starts running.
2. When you click on "log" button, the time should appear in the first row of a table while the clock keeps running. Then click again, second logged time will appear in the second row, and third, fourth, etc..
(Table can be located anywhere on the same page.)
3. I need a pause button as well.
4. Time format has to be 00:00:00:00 - Hours:Minutes:Seconds:Milliseconds

Here is a snippet I got from js-example.com. This one does only start and stop. Can someone help me here? Thanks!

<html>
<head>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
100s of free ready to use scripts, tutorials, forums.
Author: JS-Examples - http://www.js-examples.com/ 
-->



</head>
<body>

<form name=exf1>
<input type=button value="Start" onclick="startIt()">
<input type=button value="Stop" onclick="stopTimers()">
<BR>
hour: <input type=text name=hour  value="<?>" onfocus=blur()>
min:  <input type=text name=tmin   value="<?>" onfocus=blur()>
sec:  <input type=text name=sec   value="<?>" onfocus=blur()>
msec: <input type=text name=mssec value="<?>" onfocus=blur()>
</form>
<script>
var _myTimer_ms = null;
var _myTimer_s  = null;
var _myTimer_m  = null;
var _myTimer_h  = null;
function updateMS() { document.exf1.mssec.value = (100+parseInt(document.exf1.mssec.value)) % 1000; }
function updateS()  { document.exf1.sec.value   = (1+parseInt(document.exf1.sec.value))    % 60;   }
function updateM()  { document.exf1.tmin.value  = (1+parseInt(document.exf1.tmin.value))   % 60;   }
function updateH()  { document.exf1.hour.value  = (1+parseInt(document.exf1.hour.value));          }
function startIt() {
  stopTimers();
  resetTime();
  _myTimer_ms = setInterval("updateMS()",100);
  _myTimer_s  = setInterval("updateS()",1000);
  _myTimer_m  = setInterval("updateM()",1000*60);
  _myTimer_h  = setInterval("updateH()",1000*60*60);
}
function stopTimers() {
  clearInterval(_myTimer_ms);
  clearInterval(_myTimer_s);
  clearInterval(_myTimer_m);
  clearInterval(_myTimer_h);
}
function resetTime() {
  document.exf1.mssec.value=0;
  document.exf1.sec.value=0;
  document.exf1.tmin.value=0;
  document.exf1.hour.value=0;
}

</script>


</body>
</html>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
<html>
<head>

<script>
var _myTimer_ms = null;
var _myTimer_s  = null;
var _myTimer_m  = null;
var _myTimer_h  = null;
var totalTime = 0;
function updateMS() {
  totalTime = (10+parseInt(totalTime));
  document.timerControl.ttime.value=totalTime;
}
function startIt() {
  if(!_myTimer_ms)
    _myTimer_ms = setInterval("updateMS()",10);
}
function pauseTimer() {
  clearInterval(_myTimer_ms);
  _myTimer_ms = null;
}
function stopTimer() {
  pauseTimer();
  storeTime();
  totalTime = 0;
  document.timerControl.ttime.value=totalTime;
  if (document.all.mssecs.innerHTML != "" && confirm("Clear Times?")) {
    document.all.mssecs.innerHTML = "";
    document.all.secs.innerHTML = "";
    document.all.mins.innerHTML = "";
    document.all.hours.innerHTML = "";
  }
}
function storeTime() {
  if (totalTime != 0) {
    ftotalTime = Math.round((totalTime%1000)/10);
    fsec = Math.floor((totalTime/1000)%60);
    fmin = Math.floor((totalTime/60000)%60);
    fhour = Math.floor(totalTime/3600000);
    document.all.mssecs.innerHTML += ((ftotalTime<10) ? "0" + ftotalTime : ftotalTime) + "<BR>";
    document.all.secs.innerHTML += ((fsec<10) ? "0" + fsec : fsec) + ":<BR>";
    document.all.mins.innerHTML += ((fmin<10) ? "0" + fmin : fmin) + ":<BR>";
    document.all.hours.innerHTML += ((fhour<10) ? "0" + fhour : fhour) + ":<BR>";
  }
}
</script>



</head>
<body>

<form name="timerControl">
<input type=button value="Play" onclick="startIt()">
<input type=button value="Pause" onclick="pauseTimer()">
<input type=button value="Stop Timer" onclick="stopTimer()">
<input type=button value="Record Time" onclick="storeTime()">
<P>
Total Time (in ms): <input type=text name=ttime value="0" onfocus=blur()>
</form>

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td><div id="hours"></div></td>
    <td><div id="mins"></div></td>
    <td><div id="secs"></div></td>
    <td><div id="mssecs"></div></td>
  </tr>
</table>


</body>
</html>
This will work on IE only. If you need cross browser capabilities, let me know and I'll modify it some.

Author

Commented:
awsome!!! thanks!
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

i haven't had a chance to test it for more than a minute, but it should be accurate for several minutes. cheers.

Author

Commented:
kenny, this works perfectly, but there's one problem as I use this.  Is there any way to copy and paste each recorded time onto a cell on Excel spread sheet?
Since each element keeps writing in a column, this does not let me highlight a time.

If I copy the whole table it wont paste correctly on excel or notepad neither.

Any suggestion?
my appologies... try this:





<html>
<head>

<script>
var _myTimer_ms = null;
var _myTimer_s  = null;
var _myTimer_m  = null;
var _myTimer_h  = null;
var totalTime = 0;
function updateMS() {
  totalTime = (10+parseInt(totalTime));
  document.timerControl.ttime.value=totalTime;
}
function startIt() {
  if(!_myTimer_ms)
    _myTimer_ms = setInterval("updateMS()",10);
}
function pauseTimer() {
  clearInterval(_myTimer_ms);
  _myTimer_ms = null;
}
function stopTimer() {
  pauseTimer();
  storeTime();
  totalTime = 0;
  document.timerControl.ttime.value=totalTime;
  if (document.all.time.innerHTML != "" && confirm("Clear Times?")) {
    document.all.time.innerHTML = "";
  }
}
function storeTime() {
  if (totalTime != 0) {
    ftotalTime = Math.round((totalTime%1000)/10);
    fsec = Math.floor((totalTime/1000)%60);
    fmin = Math.floor((totalTime/60000)%60);
    fhour = Math.floor(totalTime/3600000);
    document.all.time.innerHTML += ((fhour<10) ? "0" + fhour : fhour) + ":" +
    ((fmin<10) ? "0" + fmin : fmin) + ":" +
    ((fsec<10) ? "0" + fsec : fsec) + ":" +
    ((ftotalTime<10) ? "0" + ftotalTime : ftotalTime) + "<BR>";


   
  }
}
</script>



</head>
<body>

<form name="timerControl">
<input type=button value="Play" onclick="startIt()">
<input type=button value="Pause" onclick="pauseTimer()">
<input type=button value="Stop Timer" onclick="stopTimer()">
<input type=button value="Record Time" onclick="storeTime()">
<P>
Total Time (in ms): <input type=text name=ttime value="0" onfocus=blur()>
</form>

<div id="time"></div>


</body>
</html>






the changes, the table is gone and replaced with a single <div> tag with the id="time" it will now write everything in one area so you should be able to copy and paste by rows.

Peace
Ken

Author

Commented:
Thanks a lot Ken. I posted the same question before you answered it....  Now I dont know how to take it down. Is it possible to cancel it or lock it? The new question title is "Timestamp/Stopwatch II". Doh'!!
go to Community Support and put in a request for it to be deleted and points returned

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial