Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    JS Stopwatch to express an input figure

    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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    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
    Last edited by Philip M; 08-19-2011 at 12:46 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote 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.
    Last edited by Philip M; 08-19-2011 at 01:54 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote 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

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    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>
    Last edited by Philip M; 08-19-2011 at 03:11 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    dolestar (08-19-2011)

  • #7
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    No problem! Glad you are satisfied!

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •