Announcement

**Philip M** · Aug 19, 2011, 06:41 AM

This sounds like homework. Show the code that you have written and then doubtless someone will correct/improve it for you. But you must make a significant effort yourself. The forum is not a free coding service.

Hint - try using the search feature of this forum. You will find plenty of examples there.

100 calories per hour is 1 calorie per 36 seconds - will people want to hang around that long just to see a number increase?

It is your responsibility to die() if necessary….. - PHP Manual

**dolestar** · Aug 19, 2011, 06:55 AM

hi Philip,

thanks for the reply. There are plenty of stop watch codes out there - like here;

Super Neat Javascript Stopwatch

http://proft.50megs.com/stopwatch.html

the bit i would like some help with is adding to this to express the increasing time as a sum of an input total.

I totally appreciate this isnt a free coding service, im merely looking for some useful advise from people with far more js capability than myself

and you're right - people wouldnt hang around on a web page long enough to watch calories go up (unless they were using the calorie stop watch as a phone app

)

but i have other idea's on the implementation of this functionality.

welcome and appreciate any help

thanks

**Philip M** · Aug 19, 2011, 07:49 AM

Originally posted by dolestar View Post

the bit i would like some help with is adding to this to express the increasing time as a sum of an input total.

Sorry, that is as clear as mud. Please say more clearly what it is you want to achieve. User inputs "100" calories. What exactly do you want to happen then? Give some examples of what you hope to see, please. When does the stopwatch stop? How is the output to be displayed?

But I have to say that if your knowledge of Javascript is minimal then you may encounter problems in attempting to adapt some pre-existing script.

**dolestar** · Aug 19, 2011, 08:02 AM

Originally posted by Philip M View Post

Sorry, that is as clear as mud. Please say more clearly what it is you want to achieve. User inputs "100" calories. What exactly do you want to happen then? Give some examples of what you hope to see, please. When does the stopwatch stop? How is the output to be displayed?

ok so, the functionality would be thus;

the user is presented with an input box to enter a numeric value that represents 1 hour - in this case, number of calories they burn in one hour

they then have a start and stop button to start and stop a stopwatch.

When they click start a stopwatch starts showing;

hours | minutes | seconds

but another counter also shows the calorie input increasing in the relevent time period.

So effectively 2 stopwatches - one showing time, another showing the input as an equation of that time.

hope this makes more sense!

Yes my js knowledge for this kind of thing is limited. Im a web designer and can walk html, css and animation jquery - but this is something I would really like to get my head around with some welcomed input from the experts

**Philip M** · Aug 19, 2011, 08:55 AM

This is the best I can do for you. If it is not exactly what you want I trust you will be able to make the necessary adjustments yourself. I am not sure that the calculation of calories is what you specified. And I am afraid that I still do not really see the point!

Code:

<html>
<head>
<title> stopwatch </title>
<script type="text/javascript">

var setT, h, m, s;

function startWatch(b){
var tick = document.getElementById('ticker');
var inpcals = document.getElementById("inpcals").value;
var HH = h<10?'0'+h:h;
var MM = m<10?'0'+m:m;
var SS = s<10?'0'+s:s;
tick.value = HH+':'+MM+':'+SS;
var elapsedsecs = (HH*60*60)+(MM*60)+(SS*1);
document.getElementById("calories").value= (inpcals * (elapsedsecs/3600)).toFixed(2);
if(!b){stopWatch();return}
s++;
if(s==60){s=0;m++}
if(m==60){m=0;h++}
setT=setTimeout(function(){startWatch(b)},1000)
}

function stopWatch(){
clearTimeout(setT);
}

function resetWatch(){
h=0; m=0; s=0;
document.getElementById("inpcals").value = "";
startWatch(false);
}

function validate() {
var x = document.getElementById("inpcals").value;
if (isNaN(x) || x<=0) {
alert ("You must enter a positive number!");
document.getElementById("inpcals").value = "";
setTimeout("document.getElementById('inpcals').focus()", 25);
return false;
}
}
</script>
</head>

<body onload="resetWatch()">

<form name = "myform" action="">
HOW MANY CALORIES? <input type = "text" id = "inpcals" onblur="validate()">
<input type="button" value="Start Clock" onclick="startWatch(true)">
<input type="button" value="Stop Clock" onclick="stopWatch()">
<input type="button" value="Reset Clock" onclick="resetWatch()">
<br>
<br>
<br>
TIME <input type="text" id="ticker" readonly> 
CALORIES BURNED <input type="text" id="calories" readonly> <br>
</form>
</body>
</html>

**dolestar** · Aug 19, 2011, 09:05 AM

Philip, what can I say! Im blown away, thank you so much that's great.

I nderstand your feeling of not seeing the point - calorie counting isnt the implementation for the code, but I promise to share the finished product with you.

Wow, thanks so so much

**Philip M** · Aug 19, 2011, 09:17 AM

No problem!

Glad you are satisfied!

Announcement

JS Stopwatch to express an input figure

JS Stopwatch to express an input figure

Comment

Comment

Comment

Comment

Comment

Comment

Comment