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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Adding time in javascript

    I am trying to set up a web that new times will be displayed when they add current times to a form.

    here is the static HTML

    <form method="POST" >
    current time is 11:32 AM</p>
    <p>add <input type="text" name="T1" size="5" value="20"> mins and the new time time would be <b> 11:52 AM</b></p>
    <p>add&nbsp; another<input type="text" name="T2" size="5" value="15"> mins and the time then changes to <b>12:07 PM</b></p>
    <p><input type="submit" value="Submit" name="B1"></p>
    <p><input type="reset" value="Reset" name="B2"></p>
    </form>


    I would like to have the new times to change dynamically as they type in either (or both) input boxes
    Last edited by javanew; 09-13-2011 at 04:45 AM.

  • #2
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Checkout Date JS - this library should give you all the required functions.

  • #3
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    924
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Time in JS is different to Date although to get time values you do actually use the Date object. It is too extensive to explain all the methods and how to work it and to be honest I'm not sure how you would dynamically add these value, but firstly, I'd look into the get and set methods of retrieving time. Try creating a simple script which will display the current time. Then create a script where you set your own time values, then try adding to these values. Notably, you should have a look at these methods:-

    GET METHODS USED WITH TIME:
    • getHours()
    • getMinutes()
    • getSeconds()
    • getMilliseconds()
    • toTimeString()


    SET METHODS USED WITH TIME:
    • setHours()
    • setMinutes()
    • setSeconds()
    • setMilliseconds()


    As you can probably guess, get methods get the current time depending on which computer the script was run. Set methods do as you can imagine, set the time to whatever your specify inside parenthesis.

    Hope this helps, definitely look into the Date object more-so for using Time.

    Regards,

    LC.
    Last edited by LearningCoder; 09-13-2011 at 08:06 AM.

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb Something to try...

    Is this what you are looking for?
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Time Manipulation </title>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?p=1135000#post1135000
    
    Number.prototype.padDigit = function() {
      var n = this;  
      return n = (n < 10) ? '0'+n : n; 
    }
    
    function showHMS(IDS,hh,mm,ss,ampm) {
      document.getElementById(IDS).innerHTML
       = hh.padDigit()+':'+mm.padDigit()+':'+ss.padDigit()+' '+ampm;
    }
    
    function showHHMMSS(IDS,minuteAdjust) {
      if (minuteAdjust == '') { minuteAdjust = 0; }
      now = new Date();
      var hh = now.getHours();
      var mm = now.getMinutes()+Number(minuteAdjust);
      while (mm > 60) { hh++; mm -= 60; }
      var ss = now.getSeconds();  
      var ampm = 'PM';  if (hh < 12) { ampm = 'AM'; }
      showHMS(IDS,hh,mm,ss,ampm);
    }
    
    var now = new Date();
    function TimeClock() {
      showHHMMSS('ct',0);
      showHHMMSS('ctPlus',Number(document.getElementById('T1').value));
      showHHMMSS('ctPlusPlus',Number(document.getElementById('T1').value)
                            + Number(document.getElementById('T2').value));
    }
    
    window.onload = function() {
      int=self.setInterval("TimeClock()",1000);
    }
    </script>
    </head>
    <body>
    <form method="POST" onsubmit="return false">
    
    <p>Current time is <b id="ct"></b></p>
    
    <p>add <input type="text" id="T1" name="T1" size="5" value="20">
     mins and the new time time would be
     <b id="ctPlus"></b></p>
    <p>add&nbsp; another <input type="text" id="T2" name="T2" size="5" value="15">
     mins and the time then changes to
     <b id="ctPlusPlus"></b></p>
    <button onclick="int=window.clearInterval(int)">Stop</button>
    <!-- Following are not really needed
     <input type="submit" value="Submit" name="B1">
     <input type="reset" value="Reset" name="B2">
    -->
    </form>
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    javanew (09-13-2011)

  • #5
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts
    That is exactly what I was looking for... Thank you.

    I know asp & vbscript pretty good, but rarely have had the need for client sided scripting till now


    Quote Originally Posted by jmrker View Post
    Is this what you are looking for?
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Time Manipulation </title>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?p=1135000#post1135000
    
    Number.prototype.padDigit = function() {
      var n = this;  
      return n = (n < 10) ? '0'+n : n; 
    }
    
    function showHMS(IDS,hh,mm,ss,ampm) {
      document.getElementById(IDS).innerHTML
       = hh.padDigit()+':'+mm.padDigit()+':'+ss.padDigit()+' '+ampm;
    }
    
    function showHHMMSS(IDS,minuteAdjust) {
      if (minuteAdjust == '') { minuteAdjust = 0; }
      now = new Date();
      var hh = now.getHours();
      var mm = now.getMinutes()+Number(minuteAdjust);
      while (mm > 60) { hh++; mm -= 60; }
      var ss = now.getSeconds();  
      var ampm = 'PM';  if (hh < 12) { ampm = 'AM'; }
      showHMS(IDS,hh,mm,ss,ampm);
    }
    
    var now = new Date();
    function TimeClock() {
      showHHMMSS('ct',0);
      showHHMMSS('ctPlus',Number(document.getElementById('T1').value));
      showHHMMSS('ctPlusPlus',Number(document.getElementById('T1').value)
                            + Number(document.getElementById('T2').value));
    }
    
    window.onload = function() {
      int=self.setInterval("TimeClock()",1000);
    }
    </script>
    </head>
    <body>
    <form method="POST" onsubmit="return false">
    
    <p>Current time is <b id="ct"></b></p>
    
    <p>add <input type="text" id="T1" name="T1" size="5" value="20">
     mins and the new time time would be
     <b id="ctPlus"></b></p>
    <p>add&nbsp; another <input type="text" id="T2" name="T2" size="5" value="15">
     mins and the time then changes to
     <b id="ctPlusPlus"></b></p>
    <button onclick="int=window.clearInterval(int)">Stop</button>
    <!-- Following are not really needed
     <input type="submit" value="Submit" name="B1">
     <input type="reset" value="Reset" name="B2">
    -->
    </form>
    </body>
    </html>

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by javanew View Post
    That is exactly what I was looking for... Thank you.

    I know asp & vbscript pretty good, but rarely have had the need for client sided scripting till now
    You're most welcome.
    Happy to help.
    Good Luck!


  •  

    Posting Permissions

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