Development Javascript / Jquery time calculations help

Discussion in 'Software' started by Delphium, 5 Oct 2010.

  1. Delphium

    Delphium Eyefinity enabled

    Joined:
    18 Mar 2007
    Posts:
    1,406
    Likes Received:
    35
    Greetings folks, I am trying to do some calculations with time in javascript/jquery, however this is new ground to me and I am struggling to get the results I am after.

    Essentially I am trying to subtract time B from time A, with the time in the following format.

    min min : sec sec : millisec millisec millisec
    basetime = 01:25:123
    lap01 = 02:35:124
    lapdif01 = lap01 - basetime

    lapdif01 should = 01:10:001 in the same format as the input.

    I am wondering how and what would be the best way to tackle such a time calculation in javascript and hope that bit-tech can help out :)

    Many thanks.
     
  2. brighty22

    brighty22 What's a Dremel?

    Joined:
    19 Aug 2010
    Posts:
    178
    Likes Received:
    5
    based on 3 weeks of java experience at IB, I would input the time as a string, then use the substring() method - which also exists in javascript - to extract the minutes, seconds and milliseconds into separate values, then combine them all so you get a total time in milliseconds. Then use simple operators to subtract the value from the base time, and rebuild the time in whatever format you want...

    There's probably a better way out there.. but that's how I'd do it :idea:

    Hope that helps :thumb:
     
  3. Delphium

    Delphium Eyefinity enabled

    Joined:
    18 Mar 2007
    Posts:
    1,406
    Likes Received:
    35
    This crossed my mind today to convert the time into milliseconds then do the maths with them values, and then convert back to mins/secs/millisec.. however I am not entirely sure how to go about breaking the given time into a string with each value seperated :S

    I assume id need to make an array out of the times using the colons as a seperater.
    Looking at it I think I need to look into the .split() command to split the time using colon as the splitter, which if I understand correctly would dump the values to an array.

    I think somehting like this...

    basetime = 01:25:123;
    basetimearray = basetime.split(':');
    basetimearray[0] = basetimearray[0] * 60 * 1000;
    basetimearray[1] = basetimearray[1] * 1000;
    basetimemilli = basetimearray[0] + basetimearray[1] + basetimearray[2];

    Which I think should give me the time in milliseconds of a value of 85123.

    So the question now is how I would convert that back into 3 seperate values for min, seconds, and milliseconds?
     
  4. brighty22

    brighty22 What's a Dremel?

    Joined:
    19 Aug 2010
    Posts:
    178
    Likes Received:
    5
    My version (albeit in java):

    PHP:
    import java.io.*;
    public class 
    raceCalc {
        public static 
    void main(String[] argsthrows IOException {
            
    InputStreamReader reader = new InputStreamReader(System.in);
            
    BufferedReader in = new BufferedReader(reader);
            
    in = new BufferedReader(new InputStreamReader(System.in));
                
                
    System.out.print("Enter the base time: ");
                
    String iInBaseTime in.readLine();
                
    System.out.print("Enter the time: ");
                
    String iInTime in.readLine();
                
                    
    int iBaseMin Integer.parseInt(iInBaseTime.substring(02));
                    
    int iBaseSec Integer.parseInt(iInBaseTime.substring(35));
                    
    int iBaseMilliSec Integer.parseInt(iInBaseTime.substring(69));
                    
    int iBaseTime = (iBaseMin*60000)+(iBaseSec*1000)+iBaseMilliSec;

                    
    int iMin Integer.parseInt(iInTime.substring(02));
                    
    int iSec Integer.parseInt(iInTime.substring(35));
                    
    int iMilliSec Integer.parseInt(iInTime.substring(69));
                    
    int iTime = (iMin*60000)+(iSec*1000)+iMilliSec;
                
                    
    int iResult iTime iBaseTime;
                
                    
    int iResultMin iResult 60000;
                    
    int iResultSec = (iResult 60000) / 1000;
                    
    int iResultMilliSec iResult - (iResultMin*60000) - (iResultSec*1000);
                    
                
    System.out.print("Result = ");
                if (
    iResultMin<10) {
                    
    System.out.print("0"+iResultMin);
                }
                else if (
    iResultMin<100) {
                    
    System.out.print(iResultMin);
                }
                
    System.out.print(":");
                if (
    iResultSec<10) {
                    
    System.out.print("0"+iResultSec);
                }
                else if (
    iResultSec<100) {
                    
    System.out.print(iResultSec);
                }
                
    System.out.print(":");
                if (
    iResultMilliSec<10) {
                    
    System.out.print("00"+iResultMilliSec);
                }
                else if (
    iResultMilliSec<100) {
                    
    System.out.print("0"+iResultMilliSec);
                }
                else if (
    iResultMilliSec<1000) {
                    
    System.out.print(iResultMilliSec);
                }
        }
    }
    It does everything you need... should give you some ideas :thumb:
    (plz consider +rep if it helps coz that took a while :lol:)
     
    Delphium likes this.
  5. Delphium

    Delphium Eyefinity enabled

    Joined:
    18 Mar 2007
    Posts:
    1,406
    Likes Received:
    35
    Cheers guy, that does give me something to think about and play with, I really appreciate you taking the time to help.
    Many thanks! :)
    +rep (as truely deserved)
    :rock:
     
  6. Delphium

    Delphium Eyefinity enabled

    Joined:
    18 Mar 2007
    Posts:
    1,406
    Likes Received:
    35
    I managed to get this working as I wanted this lunchtime with the following code...
    Code:
    <script type="text/javascript">
    $(document).ready(function () {
        $('.trackdif').each(function() {
        base = "01:28:070";
        basearray = base.split(':');
        basearray[0] = parseInt(basearray[0] * 60 * 1000);
        basearray[1] = parseInt(basearray[1] * 1000);
        basearray[2] = parseInt(basearray[2]);
        basemilli = parseInt(basearray[0] + basearray[1] + basearray[2]);
    
        track = $(this).text();
        trackarray = track.split(':');
        trackarray[0] = parseInt(trackarray[0] * 60 * 1000);
        trackarray[1] = parseInt(trackarray[1] * 1000);
        trackarray[2] = parseInt(trackarray[2]);
        trackmilli = parseInt(trackarray[0] + trackarray[1] + trackarray[2]);
        
        milliSecs = parseInt(trackmilli - basemilli);
        msSecs = (1000);
        msMins = (msSecs * 60);
        numMins = Math.floor(milliSecs / msMins);
        numSecs = Math.floor((milliSecs - (numMins * msMins)) / msSecs);
        numMillisecs = Math.floor(milliSecs - (numMins * msMins) - (numSecs * msSecs));
    
        if (numMillisecs < 10){ 
          numMillisecs = "00" + numMillisecs;
        }
        else { if (numMillisecs < 100){ 
          numMillisecs = "0" + numMillisecs;
        }}
            
        if (numSecs < 10){ 
          numSecs = "0" + numSecs;
        }
        if (numMins < 10){
          numMins = "0" + numMins;
        }
        resultString =  "+" + numMins + ":" + numSecs  + ":" + numMillisecs  ;
    
        $(this).html(resultString);
        })
    
    });
    
    </script>
    
    ...and this is what it was for...
    http://empire.ispeeds.net/~delphi/shift/
    A Need For Speed : Shift scoreboard.

    Since having the game and an ATI AMD Eyefinity setup, whenever the GF and I have guests round we have invted them to do a few laps to get recorded and placed upon the scoreboard, something of which has started to gain quite a bit of competition now between our friends trying to best each other. :)

    The scoreboard is a simple html table, with the laptimes entered in for both the Time and +Time columns, the script above replaces the +Time column entrys with the time difference from the fastest lap.

    It is then sorted in order using the JQuery .tablesorter plugin, and then uses another very small script to go down the list and enter in the positions on the left hand side.

    One thing I do realise is that this could possibly be done a bit better and more versitile if I was to use SQL and PHP, however thats ground I am yet to cover and play with, also the server which that page is hosted on does not currently have php support, as its just a simple shell account with public_html, not a dedicated web hosting account.
     
  7. brighty22

    brighty22 What's a Dremel?

    Joined:
    19 Aug 2010
    Posts:
    178
    Likes Received:
    5
    Nice one :)

    If you need a better host have a search around the tech support forum - you'll find loads of advice. Personally I use 000webhost.com. Can't really advise with php or sql... i only do html with a bit of css :rock:
     

Share This Page