Web Analytics Made Easy - StatCounter Adding time in javascript - CodingForum

Announcement

Collapse
No announcement yet.

Adding time in javascript

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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; Sep 12, 2011, 11:45 PM.
    Tags: None
  • #2
    Checkout Date JS - this library should give you all the required functions.

    Comment

    • #3
      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; Sep 13, 2011, 03:06 AM.

      Comment

      • #4
        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.codingforum.net/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>

        Comment

        • #5
          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


          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.codingforum.net/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>

          Comment

          • #6
            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!

            Comment

            Previous template Next
            Working...
            X
            😀
            🥰
            🤢
            😎
            😡
            👍
            👎