PDA

View Full Version : Javascript stopwatch that can divide seconds on display in html form

futurepbamember
03-02-2012, 08:11 PM
Hi guys!

I have a simple JavaScript stopwatch that displays the time using an html form with start/reset and clear buttons. Basically I'm making a speed calculator that converts seconds into MPH. All I need it to do is divide whatever the amount of seconds are by 40.91. So instead of it displaying the seconds being counted up (i.e. 2 seconds, would displayed as 20.455 MPH). Does that make sense?

JavaScript is not my strong suit, and It's got me stumped.

JavaScript:

var t=[0, 0, 0, 0, 0, 0, 0, 1];

function ss()
{
t[t[2]]=(new Date()).valueOf();
t[2]=1-t[2];
if (0==t[2])
{
clearInterval(t[4]);
t[3]+=t[1]-t[0];
t[4]=t[1]=t[0]=0;
disp();
}
else
{
t[4]=setInterval(disp, 43);
}
}

function r()
{
if (t[2]) ss();
t[4]=t[3]=t[2]=t[1]=t[0]=0;
disp();
t[7]=1;
}

function disp()
{
if (t[2]) t[1]=(new Date()).valueOf();
t[6].value=format(t[3]+t[1]-t[0]);
}

function format(ms)
{
var d=new Date(ms+t[5]).toString()
.replace(/.*([0-9][0-9]:[0-9][0-9]:[0-9][0-9]).*/, '\$1');
var x=String(ms%1000);
while (x.length<3) x='0'+x;
d+='.'+x;
return d;
}

{
t[5]=new Date(1970, 1, 1, 0, 0, 0, 0).valueOf();
t[6]=document.getElementById('disp');
disp();
}

HTML form:

<input type='text' id='disp' maxlength=12 readonly />
<button type='button' onclick='ss()' id='butt' data-inline="true">Start/Stop</button>
<button type='button' onclick='r()' id='butt2' data-inline="true">Reset</button>

Any help is greatly appreciated!!!

Philip M
03-02-2012, 08:36 PM
All I need it to do is divide whatever the amount of seconds are by 40.91. So instead of it displaying the seconds being counted up (i.e. 2 seconds, would displayed as 20.455 MPH). Does that make sense?

No, it does not make sense. Do you mean divide 40.91 by the number of seconds? (40.91/2 = 20.455) . If so the speed in MPH will go down as the seconds increase. Is that the idea?

All the misery this world contains comes from seeking pleasure for oneself; all the joy this world contains comes from seeking happiniess for others. - Buddist aphorism

futurepbamember
03-02-2012, 08:51 PM
Yes, exactly! As the seconds count up, the MPH go down.

Philip M
03-03-2012, 09:40 AM
I hope that this will meet your needs:-

<input type = "button" value = "Start" onclick = "startTimer(0)">
<input type = "button" value = "Stop" onclick = "clearInterval(ticker)">
<br><br>
<span id="countdown" style="font-weight: bold;"></span>
<br>
<span id="MPH" style="font-weight: bold;"></span>

<script type = "text/javascript">

var timeInSecs;
var ticker;

function startTimer(secs){
timeInSecs = parseInt(secs);
ticker = setInterval("tick()",1000);
tick(); // start the count right away

}

function tick() {
var secs = timeInSecs;
if (secs > 20) { // stop at 20 seconds
clearInterval(ticker); // stop counting
return false;
}
else {
timeInSecs++;
}

document.getElementById("countdown").innerHTML = secs + " seconds";
if (secs >0) {
document.getElementById("MPH").innerHTML = (40.91/secs).toFixed(2) + " mph";
}
}

</script>

"In the beginner's mind there are many possibilities, but in the expert's mind there are few” - Shunryu Suzuki (Japanese Zen priest, ?-1971)

futurepbamember
03-03-2012, 08:17 PM
Philip, thank you so much for your help!!! This is exactly what I was trying to do.

I do have one question though... Is it possible instead of rounding up the seconds to also show the fractions of a second while it's counting? Example: 2 secs, 2.1, secs, 2.2 secs, 2.3 secs, etc?

Thank you so much for all the help!!! :)

Philip M
03-03-2012, 08:45 PM
I do have one question though... Is it possible instead of rounding up the seconds to also show the fractions of a second while it's counting? Example: 2 secs, 2.1, secs, 2.2 secs, 2.3 secs, etc?

Yes it is, but I do not recommend it as such a rapidly changing display of 10Hz might perhaps trigger an epileptic fit in affected persons. Not likely, but possible. That could attract a swarm of expensive lawyers.

If you insist on disregarding my advice, the changes required are very simple:-

ticker = setInterval("tick()",100);

function tick() {
secs = timeInSecs/10;

futurepbamember
03-03-2012, 09:02 PM
Huh, I tried it, but it doesn't seem to work with the changes you suggested. Nothing shows.

futurepbamember
03-03-2012, 09:11 PM
Never mind, I got it working. Somehow an extra character got in there.

Thanks again for all the help!!!