SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 36
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How do I convert a digit (430) into minutes/seconds (7:30)?

    I am creating a JS function that takes a time input in minutes only and divides that number by an inputted digit. I would like to know how we use Javascript to convert that result into minutes and seconds.

    For instance, 30 (1800 seconds) divided by 4 = 450 seconds. How do I show that as 7:30? I can divide by 60 to get 7.5, but I don't know how to go from there. I got as far as the following, then got stuck.

    PHP Code:
    <form id="form2"><table>
    <
    tr>
    <
    td class="alignright">
    <
    form id="pitStops">
    Main length (minutes): <input class="display" type="number" size="4" value="" name="main">
    </
    td>
    </
    tr>
    <
    tr>
    <
    td class="alignright">
    Number of pit stops: <input class="display" type="number" size="4" value="" name="STOPSnum">
    </
    td>
    </
    tr>
    <
    tr>
    <
    td class="alignright"
    <
    input id="resultPitStops" class="buttPress2" type="button" value="Pit Time = "
    <
    input id="timeBetween" class="display2" size="4" type="number" value="" name="between"></td>
    </
    tr>

    </
    table></form>

    <
    SCRIPT LANGUAGE="JavaScript">
     
    function 
    heatpit(form) {
        
    form.elements.main.value,
        
    form.elements.STOPSnum.value,
        
    secs2 60;
    periods 1;

        
    result2 secs2 periods;

        
    form.elements.between.value result2;
    }



    resultPitStops.onclick = function () {
        var 
    form document.getElementById('form2');
        
    heatpit(form);
    }

    </SCRIPT> 
    Thanks!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You can use Math.floor to remove the decimal amount, leaving you with the number of minutes.
    To get the number of seconds, you can use the modulus operator with what you divided by, to obtain the remainder.

    Code javascript:
    var minutes = Math.floor(450 / 60); // 7
    var seconds = 450 % 60; // 30

    450 seconds is 7 minutes and 30 seconds
    Last edited by paul_wilkins; May 18, 2011 at 18:54.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Wow, thanks for the help! This is my current status. I implemented your code, but I'm not getting any results into the field. Where is my JS wrong?
    HTML Code:
    <form id="form2"><table>
    
    <tr>
    <td class="alignright">
    <form id="pitStops">
    Main length (minutes): <input class="display" type="number" size="4" value="" name="main">
    </td>
    </tr>
    <tr>
    <td class="alignright">
    Number of pit stops: <input class="display" type="number" size="4" value="" name="STOPSnum">
    </td>
    </tr>
    <tr>
    <td class="alignright"> 
    <input id="resultPitStops" class="buttPress2" type="button" value="Pit Time = "> 
    <input id="timeBetween" class="display2" size="4" type="number" value="" name="between"></td>
    </tr>
    
    </table></form>
    
    
    <SCRIPT LANGUAGE="JavaScript">
    
    function heatpit(form) {
        var e = form.elements.main.value, // put main field value into variable e
        var f = form.elements.STOPSnum.value, // put STOPSnum field value into variable f
        
    var secs2 = e * 60; // convert the minutes into seconds
    var periods = f + 1; // add 1 to the pit stop number get the number of divisions throughout the period
    
        var result2 = secs2 / periods; // divide the full time by the number of periods
        var seconds = result2 % 60; // use modulus operator to get the remainder and convert into seconds figure
        var minutes = math.floor(secs2 / 60); // get the minute figure as a digit
        var time = minutes + ":" + seconds; // concatenate everything into minutes and seconds
    
        form.elements.between.value = time; // display in the "between" field
    }
    
    
    resultPitStops.onclick = function () {
        var form = document.getElementById('form2');
        heatpit(form);
    }
    
    </SCRIPT>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by StevenHu View Post
    Wow, thanks for the help! This is my current status. I implemented your code, but I'm not getting any results into the field. Where is my JS wrong?
    It seems to be at this part.

    Code:
    resultPitStops.onclick = function () {
    The resultPitStops value doesn't exist. You may want to instead use getElementsById to obtain a reference to that button, from which you can then assign an onclick event.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    But isn't that button value right here?

    <input id="resultPitStops" class="buttPress2" type="button" value="Pit Time = ">

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by StevenHu View Post
    But isn't that button value right here?

    <input id="resultPitStops" class="buttPress2" type="button" value="Pit Time = ">
    That's not a javascript value.
    To access the button via its id attribute, you need to use getElementById

    Alternatively you can give the input a name attribute, and access it via the form elements collection.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    But the code has worked fine on the other pages if I do the following. The value shows up in the "runtime" field without using get element by id:

    HTML Code:
    function formFuel(form) {
    var a = form.elements.tank.value,
    b = form.elements.driveMinutes.value,
    c = form.elements.driveSeconds.value,
    d = form.elements.consumed.value,
    
    var used = a - d;
    var secs = b * 60;
    var secstotal = secs + c;
    var secsPerCC = secstotal / used;
    var runtime2 = secsPerCC  * a;
    
    form.elements.ans.value = secsPerCC / 60;
    }
    
    runtime.onclick = function () {
        var form = document.getElementById('form1');
        formFuel(form);
    }
    There must be another reason why it's not working.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Other issues are with how the variables are declared.
    Commonly variables should be declared as one declaration, separated by commas.

    Code javascipt:
    var foo = 'foo',
        bar = 'bar',
        baz = 'baz';
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I wrapped my lines with single quotes and got back the variable name instead of the variable itself. I'm supposed to wrap only actual digits in single quotes, right?

    Also, how do you concatenate this properly:

    time = minutes +":"+ seconds // should return "7:30"

    where minutes and seconds have already been declared earlier?

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by StevenHu View Post
    Thanks. I wrapped my lines with single quotes and got back the variable name instead of the variable itself. I'm supposed to wrap only actual digits in single quotes, right?
    That wasn't the problem I was conveying. The problem was that you used a comma at the end of the variable declarations, which confuses javascript into expecting another declaration that wasn't there.

    Quote Originally Posted by StevenHu View Post
    Also, how do you concatenate this properly:

    time = minutes +":"+ seconds // should return "7:30"
    Apart from a missing semicolon at the end of the statement, that looks to be fine.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    OK, I converted all semicolons to commas for all var declarations, with the last declaration ending in a semi-colon just before this line:

    form.elements.ans.value = secsPerCC / 60;

    I also added:
    var runtime = document.getElementById('runtime');

    just above the line:
    runtime.onclick = function () {

  12. #12
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is what I have now. With these revisions, no results make it into the two fields:
    HTML Code:
    	
    
    
    <table border="0" cellpadding="5" cellspacing="0" width="100%">
    <tr><td class="alignright"><form id="form1">
    Tank capacity, cc's: <input class="display" type="number" size="4" value="" name="tank">
    </td></tr>
    <tr><td class="alignright">Drive time, minutes: <input class="display" type="number" size="4" value="" name="driveMinutes"><br>
    <br>Drive time, seconds: <input class="display" type="number" size="4" value="0" name="driveSeconds">
    </td></tr>
    <tr><td class="alignright">
    Fuel remaining, cc's: <input class="display" type="number" size="4" value="" name="consumed">
    </td></tr>
    <tr><td class="alignright">
    <input id="runtime" name="runtime" class="buttPress2" type="button" value="Runtime ">  
    <input class="display2" size="4" type="number" value="" name="ans">
    </td></tr>
    </form></table>
    
    
    <br>
    
    
    <table border="0" cellpadding="5" cellspacing="0" width="100%">
    <tr><td class="alignright"><form id="form2">
    Main length (minutes): <input class="display" type="number" size="4" value="" name="LENGTH">
    </td></tr>
    <tr><td class="alignright">
    Number of pit stops: <input class="display" type="number" size="4" value="" name="STOPS">
    </td></tr>
    <tr><td class="alignright"> 
    <input id="resultPitStops" name="resultPitStops" class="buttPress2" type="button" value="Pit Intervals "> 
    <input id="Between" class="display2" size="4" type="number" value="" name="between">
    </td></tr>
    </form></table>
    
    <SCRIPT LANGUAGE="JavaScript">
     
    function formFuel(form) {
    var a = form.elements.tank.value,
    b = form.elements.driveMinutes.value,
    c = form.elements.driveSeconds.value,
    d = form.elements.consumed.value,
    used = (a - d), <!-- get the amount of fuel used  -->
    secs = (b * '60'), <!-- convert minutes into seconds  -->
    secstotal = (secs + c), <!-- add minutes and seconds to get total seconds  -->
    secsPerCC = (secstotal / used), <!-- divide the number of seconds into the used fuel amount for secs per cc  -->
    var seconds = (secsPerCC % '60'), <!-- use modulus operator to get the remainder and convert into seconds figure  -->
    var minutes = math.floor(secsPerCC / '60'),  <!-- get the minute figure as a digit  -->
    var runtime2 = minutes +":"+seconds, <!-- concatenate everything into minutes and seconds  -->
    runtime2 = (secsPerCC * a); <!-- get the amount of run time  -->
    
    form.elements.ans.value = runtime2;
    }
    
     
    function heatpit(form) {
    var e = form.elements.LENGTH.value, <!-- put LENGTH field value into variable e  -->
    f = form.elements.STOPS.value, <!-- put STOPS field value into variable f  -->
    secs2 = (e * '60'), <!-- convert the minutes into seconds  -->
    periods = (f + '1'), <!-- add 1 to the pit stop number get the total  number of divisions throughout the period  -->
    result2 = (secs2 / periods), <!-- divide the full time by the number of periods  -->
    seconds = (result2 % '60'), <!-- use modulus operator to get the remainder and convert into seconds figure  -->
    minutes = math.floor(result2 / '60'), <!-- get the minute figure as a digit  -->
    time = minutes +":"+seconds; <!-- concatenate everything into minutes and seconds  -->
    
    form.elements.between.value = minutes; <!-- display in the "between" field s/b "time" value  -->
    }
    
    
    var runtime = document.getElementById('runtime');
    runtime.onclick = function () {
        var form = document.getElementById('form1');
        formFuel(form);
    }
    
    var resultPitStops = document.getElementById('resultPitStops');
    resultPitStops.onclick = function () {
        var form = document.getElementById('form2');
        heatpit(form);
    }
    
    </SCRIPT>

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You still have several var problems.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I went to w3schools.com for Javascript variables and each line of their list of variables end in a semi-colon, and there are no single-quotes around their digits. They are using double-quotes around strings.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by StevenHu View Post
    I went to w3schools.com for Javascript variables
    That helps to explain some things.

    You may want to have a good read of the problems that w3schools has, over at w3schools - an intervention
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've never visited the site before now. I just chose it from a list of results in Google. Thanks for the heads-up!

  17. #17
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    You still have several var problems.
    I need to remove "var" in front of several variables.

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by StevenHu View Post
    I need to remove "var" in front of several variables.
    The most correct way is to use one var with comma-separated variable assignments.

    Code javascript:
    var foo = 'foo',
        bar = 'bar',
        baz = 'baz';

    You can use separate var statements, but that then becomes tempting to use throughout different parts of your code, which is to be avoided.

    Code javascript:
    var foo = 'foo';
    var bar = 'bar';
    var baz = 'baz';

    What is not allowed though, is to end one var statement with a comma, and to then start another var statement.

    Code javascript:
    var foo = 'foo', // error, since another variable assignment is expected here
    var bar = 'bar';
    var baz = 'baz';

    In terms of syntax, it doesn't matter whether single or double-quotes are used. However, since HTML commonly uses double-quotes for its attributes, it has become a standard practice to use single-quotes for javascript strings.

    Whichever way you decide to use, just be consistent with it. If possible, pick a set of code conventions and stick with them. There are many different code conventions, but many of them tend to converge to the same fundamental ideas.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks! Regarding Post #12, I removed the vars that followed commas. But it still doesn't work.

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by StevenHu View Post
    Thanks! Regarding Post #12, I removed the vars that followed commas. But it still doesn't work.
    Submit your code in this javascript lint page, and it will show you the most obvious problem that need to be fixed in your code.

    If you want your code to be fully without problems, there's a much harsher jslint process, but it's well worth it, especially with "the good parts" enabled.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It points to the beginning of this line, and says a semicolon is missing. Strange!

    var resultPitStops = document.getElementById('resultPitStops');

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by StevenHu View Post
    It points to the beginning of this line, and says a semicolon is missing. Strange!

    var resultPitStops = document.getElementById('resultPitStops');
    That's where the problem starts. Look at the end of the previous line.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It also ends in a semi-colon. I don't see the problem:

    var runtime = document.getElementById('runtime');
    runtime.onclick = function () {
    var form = document.getElementById('form1');
    formFuel(form);
    }

  24. #24
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Are you sure it's only the javascript that you're submitting there?

    I get a "SyntaxError: missing variable name" error at a very different place when submitting your scripting code.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #25
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,376
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh, I pasted in the whole page!


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
  •