Minute and second counter

[Webskater]

I need a minute and second counter so when someone goes on a page it displays 00:00 and starts counting the seconds and minutes that go by while they are working on a particular task. When they leave the page, or click a stop button, I want to round up to the nearest minute and store the result in a text box.
I don't know where to start. Can anyone point me in the right direction please. Thanks.

[7stud]

1) var seconds=0;
Declare it in the global scope, i.e outside of any functions.

2) When the onload event occurs, setInterval(display_time, 1000)
That will make the function display_time() execute every 1000 milliseconds = 1 second.

3) Inside display_time() increment the seconds by 1, and then display the total number of seconds in whatever format you choose.

[Webskater]

Thanks for that.

[Charles]

That method is going to slowly creep out alignment. Instead try something like:

<script type="text/javascript">
timeIn = new Date();
document.write ('<p id="time">&amp;nbsp;</p>');
onload = function () {setInterval ("document.getElementById ('time').firstChild.data = new Date ().getTime() - timeIn.getTime()", 20)}
</script>

That'll give you the miliseconds on the page and will correct for the ammount of time it takes to execute on top of the 20 miliseconds of waiting.

[Webskater]

Thanks for your answer, Charles. As always when looking at your code, it makes me feel thick.
How could I change it so it displays seconds instead of milliseconds?

[Juuitchan]

For the love of ramen noodles... don't make it repeat every 20 MILLISECONDS for Pete's sake!! Change the interval to something more reasonable, like 475 milliseconds.

Also... hmmm, how DO you convert milliseconds to seconds? What kind of math do you need to do that?... Oh, and if you want to round it to the nearest second, hmm.. rounding, rounding, what can we use in JavaScript to round numbers?

[senshi]

a rounder?

[Charles]

<script type="text/javascript">
Date.ONE_SECOND = 1000;
Date.ONE_MINUTE = Date.ONE_SECOND * 60;
Date.ONE_HOUR = Date.ONE_MINUTE * 60;

timeIn = new Date();
document.write ('<p id="time">&nbsp;</p>');
onload = function () {setInterval ("document.getElementById ('time').firstChild.data = Math.round ((new Date ().getTime() - timeIn.getTime()) / Date.ONE_SECOND)", 200)}
</script>

[Charles]

<script type="text/javascript">
Date.ONE_SECOND = 1000;
Date.ONE_MINUTE = Date.ONE_SECOND * 60;
Date.ONE_HOUR = Date.ONE_MINUTE * 60;

Date.prototype.toTimeString = function () {return isNaN (this.getTime()) ? 'NaN' : [this.getUTCHours () < 10 ? '0' + this.getUTCHours () : this.getUTCHours(), this.getUTCMinutes () < 10 ? '0' + this.getUTCMinutes () : this.getUTCMinutes(), this.getUTCSeconds () < 10 ? '0' + this.getUTCSeconds () : this.getUTCSeconds()].join (':')}

timeIn = new Date();
document.write ('<p id="time">&nbsp;</p>');
onload = function () {setInterval ("document.getElementById ('time').firstChild.data = new Date (new Date ().getTime() - timeIn.getTime()).toTimeString()", 200)}
</script>

[Webskater]

Originally posted by Juuitchan
For the love of ramen noodles... don't make it repeat every 20 MILLISECONDS for Pete's sake!! Change the interval to something more reasonable, like 475 milliseconds.

Also... hmmm, how DO you convert milliseconds to seconds? What kind of math do you need to do that?... Oh, and if you want to round it to the nearest second, hmm.. rounding, rounding, what can we use in JavaScript to round numbers?

I asked for an explanation of Charles code because I could not easily see a variable that I might divide to convert it to seconds. Whilst it is quite simple to take the piss out of someone who knows less than you, presumably someone like Charles could take the piss out of almost all the people who contribute here - if he felt like it. I have observed that people who criticise Charles's code usually live to regret it. Further, anyone who answers a question here could, by definition, take the piss out the person who asked it - if they had a mind to. I would politely suggest that, if you have no contribution to make, don't make one.

[Juuitchan]

What I meant was:

Read the docs to see if you can solve your own problem before you ask for help. Webskater asked: "How could I change it so it displays seconds instead of milliseconds?" I basically wanted him to read the docs and then do the conversion himself! JavaScript has a division operator and a rounding function. All the tools are there; just use them. Or, if you don't want to do so much math, convert the number to a string, then check to see if it has at least 4 characters, and if it does, chop off the last 3 (this will always round down, though), but if it doesn't, write "0". Or... I can think of at least two other methods, at least one of which is probably evil, but I don't want to list them.