...

View Full Version : Adding time in javascript



javanew
09-13-2011, 03:10 AM
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

syslogic
09-13-2011, 07:46 AM
Checkout Date JS (http://www.datejs.com/) - this library should give you all the required functions.

LearningCoder
09-13-2011, 07:58 AM
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.

jmrker
09-13-2011, 09:25 PM
Is this what you are looking for? :confused: :eek: ;)


<!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>

javanew
09-13-2011, 09:54 PM
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



Is this what you are looking for? :confused: :eek: ;)


<!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>

jmrker
09-14-2011, 01:42 AM
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!
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum