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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Javascript formatting number to seconds (0'00.000)

    Hi,

    I've built a sorting table for what will (hopefully) be a leaderboard for Forza 4. I have the table sorted properly and my current script (within the table) adds up all three T columns and brings the total to 72.001 as expected, woot!

    Where I'm stuck is converting the 72.001 to 1 minute 12.001 seconds (1:12.001) and I need to have it include the thousandths since the game gives that information. Once I get the JS going for the top row I can copy down

    Any advice on converting this is greatly appreciated and I Bolded the JS I'm referring to:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>Forza Motorsport 4 FRS Leaderboard</title>
    	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    	<script type="text/javascript" src="sortable.js"></script>
    	<style>
    		table {
    			text-align: left;
    			font-size: 12px;
    			font-family: verdana;
    			background: #c0c0c0;
    		}
     
    		table thead  {
    			cursor: pointer;
    		}
     
    		table thead tr,
    		table tfoot tr {
    			background: #c0c0c0;
    		}
     
    		table tbody tr {
    			background: #f0f0f0;
    		}
     
    		td, th {
    			border: 1px solid white;
    		}
    	</style>
    </head>
     
    <body>
     
    <table cellspacing="3" cellpadding="4" class="" id="myTable">
    	<thead>
    		<tr>
    			<th class="c1">DRIVER</th>
    			<th class="c2">1</th>
    			<th class="c2">2</th>
    			<th class="c2">3</th>
    			<th class="c6">TOTAL</th>
    			<th class="c5">DIVISION</th>
    			<th class="c7">CONTROLLER</th>
    		</tr>
    	</thead>
     
    	<tbody>
    		<tr id="SubTable1" class="r1">
    			<td class="c1">Driver Name 1</td>
    			<td class="c2">12.000</td>
    			<td class="c2">24.000</td>
    			<td class="c2">36.001</td>
    			<script language="javascript" type="text/javascript">
                var tds = document.getElementById('SubTable1').getElementsByTagName('td');
                var totalTime = 0.000;
    			for(var i = 0; i < tds.length; i ++) {
                    if(tds[i].className == 'c2') {
                        totalTime += isNaN(tds[i].innerHTML) ? 0 : parseFloat(tds[i].innerHTML);
                    }
                }
                document.getElementById('SubTable1').innerHTML += totalTime;
    			</script>
    			<td class="c5">1</td>
    			<td class="c7">Wheel</td>
    		</tr>
    		<tr class="r2">
    			<td class="c1">Driver Name 2</th>
    			<td class="c2">12.100</th>
    			<td class="c3">24.100</th>
    			<td class="c4">36.100</th>
    			<td class="c6">00.000</th>
    			<td class="c5">2</th>
    			<td class="c7">Gamepad</th>
    		</tr>
    		<tr class="r2">
    			<td class="c1">Driver Name 3</th>
    			<td class="c2">12.200</th>
    			<td class="c3">24.200</th>
    			<td class="c4">36.200</th>
    			<td class="c6">00.000</th>
    			<td class="c5">3</th>
    			<td class="c7">Wheel</th>
    		</tr>
    		<tr class="r2">
    			<td class="c1">Driver Name 4</th>
    			<td class="c2">12.300</th>
    			<td class="c3">24.300</th>
    			<td class="c4">36.300</th>
    			<td class="c6">00.000</th>
    			<td class="c5">4</th>			
    			<td class="c7">Gamepad</th>
    		</tr>
    		<tr class="r2">
    			<td class="c1">Driver Name 5</th>
    			<td class="c2">12.400</th>
    			<td class="c3">24.400</th>
    			<td class="c4">36.400</th>
    			<td class="c6">00.000</th>
    			<td class="c5">5</th>
    			<td class="c7">Wheel</th>
    		</tr>
    	</tbody>
    </table>
    
    <script type="text/javascript">
    var t = new SortableTable(document.getElementById('myTable'), 100);
    </script>
     
    </body>
    </html>
    Oh, and any help on centering the result in the cell (72.001) would be excellent too, thank you.


    Jerome
    Last edited by jump_ace; 12-08-2011 at 10:36 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    So you are saying that this line
    Code:
    document.getElementById('SubTable1').innerHTML += totalTime;
    is correctly dumping "72.001" where you want it?

    Okay, easy enough.

    Code:
          var mins = Math.floor( totalTime / 60 ); // get just the minutes
          totalTime -= ( 60 * mins ); // subtract the minutes
          secs = totalTime.toFixed(3); // so this will be 0.000 through 59.999
          if ( secs.length < 6 ) secs = "0" + secs; // if 0.000 through 9.999 prefix with zero
          document.getElementById('SubTable1').innerHTML +=  ( mins + ":" + secs );
    BUT...

    But you are dumping that value into the <tr> element!!!

    You can't do that. You can only put <td>'s and <th>'s into a <tr>.

    So I don't know what you mean by "center it", since you aren't putting it any place where it should be going now.

    The best way to do this would be to create an HTML element (<td> or<th> or whatever) ahead of time (that is, just a blank element in the HTML) and put the total it in there. Give the element an id so you can do so.
    Last edited by Old Pedant; 12-09-2011 at 01:34 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jump_ace (12-09-2011)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    It occurs to me that if a total time is 59.9995 seconds or so, then when it gets rounded up by the toFixed() call the result will the next minute.

    If you think that could possibly happen, we should round before converting to minute & seconds.
    Code:
        var msecs = Math.round( 1000 * totalTime ); // milliseconds, rounded
        var mins = Math.floor( msecs / 60000 ); // minutes in those milliseconds
        msecs -= ( mins * 60000 ); // lop off the minutes
        if ( msecs < 10000 ) msecs = "0" + msecs;
        var pretty = mins + ":" + msecs(0,2) + ":" + msecs(2);
        document.getElementById("findBetterPlaceForThis").innerHTML = pretty;
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    jump_ace (12-09-2011)

  • #4
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for the replies O.P.

    I managed to get it to add up the time properly now. However, it's including like 12 decimal places and I only want it to show 3 decimal places.

    Quote Originally Posted by Old Pedant View Post
    But you are dumping that value into the <tr> element!!!

    You can't do that. You can only put <td>'s and <th>'s into a <tr>.

    So I don't know what you mean by "center it", since you aren't putting it any place where it should be going now.

    The best way to do this would be to create an HTML element (<td> or<th> or whatever) ahead of time (that is, just a blank element in the HTML) and put the total it in there. Give the element an id so you can do so.

    I'm a little lost here tbh (still very new at JS), I got this far from google/old college book, lol. Anyway, everytime I try to stick this script into a <td> it disappears, or it brings the total time under the 'DIVISION' column to the right. The only way I could get it to even appear was to remove it from the <td> completely. But now it gets displayed off-center because of that.

    Here is my current code, can you show me where to insert your code? (When I try it, it disappears again or doesn't work - again cause I'm new):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>Forza Motorsport 4 FRS Leaderboard</title>
    	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    	<script type="text/javascript" src="sortable.js"></script>
    	<style>
    		table {
    			text-align: left;
    			font-size: 12px;
    			font-family: verdana;
    			background: #c0c0c0;
    		}
     
    		table thead  {
    			cursor: pointer;
    		}
     
    		table thead tr,
    		table tfoot tr {
    			background: #c0c0c0;
    		}
     
    		table tbody tr {
    			background: #f0f0f0;
    		}
     
    		td, th {
    			border: 1px solid white;
    		}
    	</style>
    </head>
     
    <body>
     
    <table cellspacing="3" cellpadding="4" class="" id="myTable">
    	<thead>
    		<tr>
    			<th class="c1">DRIVER</th>
    			<th class="c2">T1</th>
    			<th class="c2">T2</th>
    			<th class="c2">T3</th>
    			<th class="c6">TOTAL</th>
    			<th class="c5">DIVISION</th>
    			<th class="c7">CONTROLLER</th>
    		</tr>
    	</thead>
     
    	<tbody>
    		<tr id="SubTable1" class="r1">
    			<td class="c1">Driver Name 1</td>
    			<td class="c2">45.000</td>
    			<td class="c2">54.000</td>
    			<td class="c2">46.001</td>
    			<script language="javascript" type="text/javascript">
                var tds = document.getElementById('SubTable1').getElementsByTagName('td');
    			var totalTime = 0;
    			for(var i = 0; i < tds.length; i ++) {
                    if(tds[i].className == 'c2') {
                        totalTime += isNaN(tds[i].innerHTML) ? 0 : parseFloat(tds[i].innerHTML);
                    }
    			var minutes = Math.floor(totalTime / 60);
    			var seconds = (totalTime - minutes * 60);
                }
                document.getElementById('SubTable1').innerHTML += minutes + ":" + seconds;
    			</script>
    			<td class="c5">1</td>
    			<td class="c7">Wheel</td>
    		</tr>
    		<tr class="r2">
    			<td class="c1">Driver Name 2</th>
    			<td class="c2">12.100</th>
    			<td class="c3">24.100</th>
    			<td class="c4">36.100</th>
    			<td class="c6">00.000</th>
    			<td class="c5">2</th>
    			<td class="c7">Gamepad</th>
    		</tr>
    		<tr class="r2">
    			<td class="c1">Driver Name 3</th>
    			<td class="c2">12.200</th>
    			<td class="c3">24.200</th>
    			<td class="c4">36.200</th>
    			<td class="c6">00.000</th>
    			<td class="c5">3</th>
    			<td class="c7">Wheel</th>
    		</tr>
    		<tr class="r2">
    			<td class="c1">Driver Name 4</th>
    			<td class="c2">12.300</th>
    			<td class="c3">24.300</th>
    			<td class="c4">36.300</th>
    			<td class="c6">00.000</th>
    			<td class="c5">4</th>			
    			<td class="c7">Gamepad</th>
    		</tr>
    		<tr class="r2">
    			<td class="c1">Driver Name 5</th>
    			<td class="c2">12.400</th>
    			<td class="c3">24.400</th>
    			<td class="c4">36.400</th>
    			<td class="c6">00.000</th>
    			<td class="c5">5</th>
    			<td class="c7">Wheel</th>
    		</tr>
    	</tbody>
    </table>
    
    <script type="text/javascript">
    var t = new SortableTable(document.getElementById('myTable'), 100);
    </script>
     
    </body>
    </html>
    Thanks again for your time with me.

    Jerome
    Last edited by jump_ace; 12-09-2011 at 07:49 PM.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    If you don't want to use my code, then you'll have to write your own.

    I showed you how to only display 3 decimal places.

    And your code will also show times with fewer than 10 seconds as 1:3.003 instead of 1:03.003
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That was just something I was trying before you posted. I'm still not following on where to put what code

    Here is my latest attempt using your latest code snippet:

    Code:
    		<tr id="SubTable1" class="r1">
    			<td class="c1">Driver Name 1</td>
    			<td class="c2">12.000</td>
    			<td class="c2">24.000</td>
    			<td class="c2">36.001</td>
    			<td class="c3">
    			<script language="javascript" type="text/javascript">
                var tds = document.getElementById('SubTable1').getElementsByTagName('td');
    			var totalTime = 0;
    			for(var i = 0; i < tds.length; i ++) {
                    if(tds[i].className == 'c2') {
                        totalTime += isNaN(tds[i].innerHTML) ? 0 : parseFloat(tds[i].innerHTML);
                    }
    			}
    			var msecs = Math.round( 1000 * totalTime ); // milliseconds, rounded
    			var mins = Math.floor( msecs / 60000 ); // minutes in those milliseconds
    			msecs -= ( mins * 60000 ); // lop off the minutes
    			if ( msecs < 10000 ) msecs = "0" + msecs;
    			var pretty = mins + ":" + msecs(0,2) + ":" + msecs(2);
    			 document.getElementById('c3').innerHTML = pretty + </td>;
    			</script>
    			<td class="c5">1</td>
    			<td class="c7">Wheel</td>
    		</tr>
    I don't get a value returned with this as I'm probably missing something.

    I also attempted to put the totalTime in a <td> like you mentioned before.

    What am I missing here, hm...

    Thanks agian OP!

    Jerome

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Almost.
    Code:
    document.getElementById('c3').innerHTML = pretty + "</td>";
    But that's still a mistake. You don't *HAVE* any element with that id. You have an element with that *CLASS*.

    Looking at your code, I think that what you really want here is ugly old document.write()

    But if you are going to repeat this code for each of the other such sections, then much better than this would be to pull this code out of "inline" and put it at the very bottom of the page and then write it to process *ALL* the sections.

    But looking at all the <tr> sections, there's none of the others that have more than one <td class="c2">

    So does that mean that the others don't need this totalling up?

    Can I ask a dumb question: Is this <table> being created from PHP code? Or other server-side code? Because if so, you should definitely be doing the calculations there, and not in JavaScript.
    Last edited by Old Pedant; 12-10-2011 at 02:47 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    The other sections with the c2 and c3 for the splits do need totaling up I just haven't changed yet, but I will once I get this bugger up and running.

    I don't have access to a php server so all this needs to be done client side, if possible and is why I'm trying JavaScript.

    that + </td> was my attempt to try and formally put the value in the table 'cell' like you mentioned earlier. But obviously I may be in over my head here, haha.

    How would I go about putting the inline code at the bottom of the page to process all the splits?

    Jerome

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Show me the final version of at least 2 and preferably 3 or more of those <tr> sections, with the right class names, etc. Else I am whistling in the dark.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It looks like I won't need to build a new one on my own (for now at least) as another solution came up.

    I truly appreciate your time spent with me O.P. Thank you.


    Jerome


  •  

    Posting Permissions

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