...
PDA

Javascript formatting number to seconds (0'00.000)

jump_ace
12-08-2011, 10:34 PM
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:

<!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
Old Pedant
12-09-2011, 01:25 AM
So you are saying that this line
document.getElementById('SubTable1').innerHTML += totalTime;
is correctly dumping "72.001" where you want it?

Okay, easy enough.


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.
Old Pedant
12-09-2011, 01:40 AM
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.

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;
jump_ace
12-09-2011, 07:45 PM
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.

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):

<!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
Old Pedant
12-09-2011, 08:22 PM
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
jump_ace
12-09-2011, 10:08 PM
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:

<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
Old Pedant
12-10-2011, 02:44 AM
Almost.

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.
jump_ace
12-10-2011, 06:39 AM
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
Old Pedant
12-10-2011, 09:16 AM
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.
jump_ace
12-12-2011, 11:41 PM
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

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum