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
    Feb 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Javascript stopwatch that can divide seconds on display in html form

    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:
    Code:
    	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;
    	}
    
    	function load() 
    	{
    	t[5]=new Date(1970, 1, 1, 0, 0, 0, 0).valueOf();
    	t[6]=document.getElementById('disp');
    	disp();
    	}
    HTML form:
    Code:
      <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!!!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by futurepbamember View Post
    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
    Last edited by Philip M; 03-02-2012 at 07:38 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
    Feb 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yes, exactly! As the seconds count up, the MPH go down.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    I hope that this will meet your needs:-

    Code:
    <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
    alert ("Your time is up!");
    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)

    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
    Feb 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!!!

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by futurepbamember View Post
    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;
    Last edited by Philip M; 03-03-2012 at 07:57 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:

    futurepbamember (03-03-2012)

  • #7
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Huh, I tried it, but it doesn't seem to work with the changes you suggested. Nothing shows.

  • #8
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Never mind, I got it working. Somehow an extra character got in there.

    Thanks again for all the help!!!


  •  

    Tags for this Thread

    Posting Permissions

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