SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing Seconds to Hours in Timer

    Hello everyone!

    I have the following code that will count the elapsed time and print the value in seconds after the user hits the stop button. However we are trying to get it to post the elapsed time in hours. So lets say the elapsed time is 20 mintues, the output would be .3 hours. I appreciate any help or tips you can give me.

    Code JavaScript:
    <script type="text/javascript">
     
    // Javascript to compute elapsed time between "Start" and "Finish" button clicks
    function timestamp_class(this_current_time, this_start_time, this_end_time, this_time_difference) { 
            this.this_current_time = this_current_time;
            this.this_start_time = this_start_time;
            this.this_end_time = this_end_time;
            this.this_time_difference = this_time_difference;
            this.GetCurrentTime = GetCurrentTime;
            this.StartTiming = StartTiming;
            this.EndTiming = EndTiming;
        }
     
        //Get current time from date timestamp
        function GetCurrentTime() {
        var my_current_timestamp;
            my_current_timestamp = new Date();              //stamp current date & time
            return my_current_timestamp.getTime();
            }
     
        //Stamp current time as start time and reset display textbox
        function StartTiming() {
            this.this_start_time = GetCurrentTime();        //stamp current time
            document.TimeDisplayForm.TimeDisplayBox.value = 0;      //init textbox display to zero
            }
     
        //Stamp current time as stop time, compute elapsed time difference and display in textbox
        function EndTiming() {
            this.this_end_time = GetCurrentTime();          //stamp current time
            this.this_time_difference = (this.this_end_time - this.this_start_time) / 1000; //compute elapsed time
            document.TimeDisplayForm.TimeDisplayBox.value = this.this_time_difference;      //set elapsed time in display box
            }
     
    var time_object = new timestamp_class(0, 0, 0, 0);  //create new time object and initialize it
     
    //-->
    </script>
     
        <form>
            <input type="button" value="Start" onClick="time_object.StartTiming()"; name="StartButton">
        </form>
        <form>
            <input type="button" value="Finish" onClick="time_object.EndTiming()"; name="EndButton">
        </form>
        <form name="TimeDisplayForm">
        Elapsed time:
          <input type="text" name="TimeDisplayBox" size="6">
        seconds
        </form>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    You can divide seconds by 60 to get the number of minutes.

    If you want the resulting number to a certain number of decimal places, you can use toFixed()
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply paul!

    Then would we divide that again by 60 to get the hours?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by newcoder01 View Post
    Thanks for the reply paul!

    Then would we divide that again by 60 to get the hours?
    There are 60 minutes in an hour, so you can divide the seconds by (60 * 60)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was told to divide by 36,00,000 (1 hour = 60 mins * 60 secs * 1000 milliseconds) to get the value in hours.=, would that be correct?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by newcoder01 View Post
    I was told to divide by 36,00,000 (1 hour = 60 mins * 60 secs * 1000 milliseconds) to get the value in hours.=, would that be correct?
    That's only if the value that you start with is in milliseconds.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks paul. I was able to get the time in hours working, but when I try toFixed(2) it puts out 2 decimal places but it also puts the elapsed time as 0.00.

    Code JavaScript:
    document.TimeDisplayForm.TimeDisplayBox.value = this.this_time_difference.toFixed(2);      //set elapsed time in display box

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by newcoder01 View Post
    Thanks paul. I was able to get the time in hours working, but when I try toFixed(2) it puts out 2 decimal places but it also puts the elapsed time as 0.00.
    That implies that this.this_time_difference is also zero. Trace it back.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I took out .toFixed(2) and it outputs the correct answer. As soon as I put it back in, it outputs 0 again. I am not sure where to trace it back to since thats all I am adding to my code.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by newcoder01 View Post
    I took out .toFixed(2) and it outputs the correct answer. As soon as I put it back in, it outputs 0 again. I am not sure where to trace it back to since thats all I am adding to my code.
    Do you have a test page, or some demo code so that we can also experience the problem and diagnose a solution?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the code that I am using without the .toFixed(2).

    Code JavaScript:
    <script type="text/javascript">
     
    // Javascript to compute elapsed time between "Start" and "Finish" button clicks
    function timestamp_class(this_current_time, this_start_time, this_end_time, this_time_difference) { 
            this.this_current_time = this_current_time;
            this.this_start_time = this_start_time;
            this.this_end_time = this_end_time;
            this.this_time_difference = this_time_difference;
            this.GetCurrentTime = GetCurrentTime;
            this.StartTiming = StartTiming;
            this.EndTiming = EndTiming;
        }
     
        //Get current time from date timestamp
        function GetCurrentTime() {
        var my_current_timestamp;
            my_current_timestamp = new Date();              //stamp current date & time
            return my_current_timestamp.getTime();
            }
     
        //Stamp current time as start time and reset display textbox
        function StartTiming() {
            this.this_start_time = GetCurrentTime();        //stamp current time
            document.TimeDisplayForm.TimeDisplayBox.value = 0;      //init textbox display to zero
            }
     
        //Stamp current time as stop time, compute elapsed time difference and display in textbox
        function EndTiming() {
            this.this_end_time = GetCurrentTime();          //stamp current time
            this.this_time_difference = (this.this_end_time - this.this_start_time) / 3600000; //compute elapsed time
            document.TimeDisplayForm.TimeDisplayBox.value = this.this_time_difference;      //set elapsed time in display box
            }
     
     
     
    var time_object = new timestamp_class(0, 0, 0, 0);  //create new time object and initialize it
     
    //-->
    </script>
     
        <form>
            <input type="button" value="Start" onClick="time_object.StartTiming()"; name="StartButton">
        </form>
        <form>
            <input type="button" value="Finish" onClick="time_object.EndTiming()"; name="EndButton">
        </form>
        <form name="TimeDisplayForm">
        Total Time Spent working on the car:
          <input type="text" name="TimeDisplayBox" size="6">
        hours
        </form>

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Have you tried waiting longer before stopping the timer?

    Currently the value is something like:
    0.0011266666666666667

    When that's restricted to two decimal places, that is only this green part of the number:

    Code:
    0.0011266666666666667
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I see why it is doing that now. We just decided we are going to go to 4 decimal places. Thanks for your help, its highly appreciated!


Bookmarks

Posting Permissions

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