...

View Full Version : JS Stopwatch to express an input figure



dolestar
08-19-2011, 10:43 AM
hi,

im new, so hey, great forum.

I'm hoping someone can help - Im looking for a js stopwatch that would express a figure input by the end user -

so for example the code could ask 'how many calories do you burn an hour' - user inputs 100

They start the stop watch and the stop watch show both the seconds/minutes increasing, but also show the calories increasing as (input="100"/60)/60

can anyone point in the right direction?

many thanks

Philip M
08-19-2011, 11: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
08-19-2011, 11:55 AM
hi Philip,

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

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
08-19-2011, 12:49 PM
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
08-19-2011, 01:02 PM
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
08-19-2011, 01:55 PM
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!




<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
08-19-2011, 02:05 PM
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
08-19-2011, 02:17 PM
No problem! :) Glad you are satisfied!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum