Junior Coders
Incrementing Hours To Time Format
I am looking for a simple way to add an hour incrementally to a given time value (but not as in a live clock). The date is not important. For example 22:15 + 1 hr = 23:15 + 1 hr = 00.15 + 1 hr = 01:15 etc. Each new time will appear in a separate text box. The form is designed to cover a twenty-four hour period. I just need a start. So far I have not found any script to assist me here. Can you please help?
Regular Coders
Here, an example using aTimeobject.
Code:function Time(h, m) { this.hours = typeof h == "number" ? h : 0; this.minutes = typeof m == "number" ? m : 0; } Time.prototype.AddTime = function(time) { this.AddHours(time.hours); this.AddMinutes(time.hminutes); } Time.prototype.AddHours = function(h) { this.hours = (this.hours + h) % 24; } Time.prototype.AddMinutes = function(m) { this.minutes += m; this.AddHours(Math.floor(this.minutes / 60)); this.minutes %= 60; } Time.prototype.AsString = function() { return (this.hours < 10 ? "0" + this.hours : this.hours) + ":" + (this.minutes < 10 ? "0" + this.minutes : this.minutes); } // Usage... var time = new Time(22, 15); time.AddHour(1); document.write( time.AsString() ); // Will output 23:15
Last edited by DimX; 07-07-2008 at 10:58 AM. Reason: Sample output
TimeTracker (07-07-2008)
Junior Coders
DimX:
The code did not write a result. Could you please explain the time.hminutes in the line this.AddMinutes(time.hminutes);? Even with time.minutes there was no result posted. I will be featuring selectedIndex for the hr and min.
Junior Coders
This is not an easy problem to solve. I have tried to get it to work without success, even after adding drop down menus for hours and minutes. This is the format towards which I am working.
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function Time(h, m) {
this.hours = typeof h == "number(form.hrnum.selectedIndex + 1)" ? h : 0;
this.minutes = typeof m == "number(form.minnum.selectedIndex + 1)" ? m : 0;
}
Time.prototype.AddTime = function(time) {
this.AddHours(time.hours);
this.AddMinutes(time.minutes); // no hminutes;
}
Time.prototype.AddHours = function(h) {
this.hours = (this.hours + h) % 24;
}
Time.prototype.AddMinutes = function(m) {
this.minutes += m;
this.AddHours(Math.floor(this.minutes / 60));
this.minutes %= 60;
}
Time.prototype.AsString = function() {
return (this.hours < 10 ? "0" + this.hours : this.hours)
+ ":"
+ (this.minutes < 10 ? "0" + this.minutes : this.minutes);
}
// Usage...
var time = new Time(h, m);
var nextHour = Number(form.nextHour.value);
time.AddHour(1);
form.nextHour.value = time.AsString(); // Will output 23:15
// -->
</script>
</head>
<body>
<form>
<center><table BORDER=0 CELLSPACING=2 CELLPADDING=5 COLS=1 WIDTH="700" >
<tr>
<td ALIGN=CENTER VALIGN=TOP WIDTH="50%" BGCOLOR="#FFFFCC">
<center><table BORDER=0 CELLSPACING=0 CELLPADDING=5 COLS=2 WIDTH="25%" >
<tr>
<td ALIGN=CENTER VALIGN=TOP><select name="hrnum" size="1"><option><font face="Verdana"><font size=-1>00</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</font></font></option></select></td>
<td ALIGN=CENTER VALIGN=TOP><select name="minnum" size="1"><option><font face="Verdana"><font size=-1>00</option><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option><option>32</option><option>33</option><option>34</option><option>35</option><option>36</option><option>37</option><option>38</option><option>39</option><option>40</option><option>41</option><option>42</option><option>43</option><option>44</option><option>45</option><option>46</option><option>47</option><option>48</option><option>49</option><option>50</option><option>51</option><option>52</option><option>53</option><option>54</option><option>55</option><option>56</option><option>57</option><option>58</option><option>59</font></font></option></select></td>
</tr>
</table></center>
<b><font face="Verdana"><font color="#3333FF"><font size=-1>HH : MM</font></font></font></b></td>
</tr>
<tr>
<td>
<center><input type="button" value="Calc" onclick="Time(this.form)"></center>
<br><center><input type="text" name="nextHour" size="8"></form></center>
</td>
</tr>
</table></center>
</body>
</html>
Regular Coders
Sorry, as it was just very quickly written, I had some typos there.
Thetime.hminutesshould betime.minutes.
And in the usage sampletime.AddHourshould betime.AddHours
A working example can be found here: http://dimx.awardspace.com/dd/time.htm
TimeTracker (07-07-2008)
Junior Coders
This works incrementally as you can see. I was hoping to input the time by using a dropdown menu for the hours and minutes and post the responses to text fields so that I can create a table instead of a long narrow list which document.write provides. Where you have "number" I replace it with "number(form.hrnum.selectedIndex + 1)" and "number(form.minnum.selectedIndex + 1)". However, there is something wrong with my code.
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function Time(h, m) {
this.hours = typeof h == "number" ? h : 0; // to select input from dropdown menu;
this.minutes = typeof m == "number" ? m : 0;
}
Time.prototype.AddTime = function(time) {
this.AddHours(time.hours);
this.AddMinutes(time.minutes);
}
Time.prototype.AddHours = function(h) {
this.hours = (this.hours + h) % 24;
}
Time.prototype.AddMinutes = function(m) {
this.minutes += m;
this.AddHours(Math.floor(this.minutes / 60));
this.minutes %= 60;
}
Time.prototype.AsString = function() {
return (this.hours < 10 ? "0" + this.hours : this.hours)
+ ":"
+ (this.minutes < 10 ? "0" + this.minutes : this.minutes);
}
// Usage...
var time = new Time(22, 15);
time.AddHours(1);
document.write( time.AsString() + " - " + " commentA " + " <p> "); // Will output 23:15
time.AddHours(1);
document.write( time.AsString() + " - " + " commentB " + " <p> "); // Will output 00:15
time.AddHours(1);
document.write( time.AsString() + " - " + " commentC " + " <p> "); // Will output 01:15
time.AddHours(1);
document.write( time.AsString() + " - " + " commentD " + " <p> "); // Will output 02:15
// Output to text field...
var time = new Time(h, m);
time.AddHours(1);
var nextHour = Number(form.nextHour.value);
form.nextHour.value = time.AsString(); // It is intended to output selected time plus one hour
// -->
</script>
</head>
<body>
<form>
<center><table BORDER=0 CELLSPACING=2 CELLPADDING=5 COLS=1 WIDTH="700" >
<tr>
<td ALIGN=CENTER VALIGN=TOP WIDTH="50%" BGCOLOR="#FFFFCC">
<center><table BORDER=0 CELLSPACING=0 CELLPADDING=5 COLS=2 WIDTH="25%" >
<tr>
<td ALIGN=CENTER VALIGN=TOP><select name="hrnum" size="1"><option><font face="Verdana"><font size=-1>00</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</font></font></option></select></td>
<td ALIGN=CENTER VALIGN=TOP><select name="minnum" size="1"><option><font face="Verdana"><font size=-1>00</option><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option><option>32</option><option>33</option><option>34</option><option>35</option><option>36</option><option>37</option><option>38</option><option>39</option><option>40</option><option>41</option><option>42</option><option>43</option><option>44</option><option>45</option><option>46</option><option>47</option><option>48</option><option>49</option><option>50</option><option>51</option><option>52</option><option>53</option><option>54</option><option>55</option><option>56</option><option>57</option><option>58</option><option>59</font></font></option></select></td>
</tr>
</table></center>
<b><font face="Verdana"><font color="#3333FF"><font size=-1>HH : MM</font></font></font></b></td>
</tr>
<tr>
<td>
<center><input type="button" value="Calc" onclick="Time(h, m)"></center>
<br><center><input type="text" name="nextHour" size="8"></form></center>
</td>
</tr>
</table></center>
</body>
</html>
Regular Coders
You have quite a few errors in your code.
First, your form doesn't have a name and your controls don't have ids so there is no elegant way to access them. Either give you select boxes some ids (id="some_id") or give your form a name (name="some_name").
You can then reference your controls using eitherdocument.getElementById("some_id")ordocument.forms["some_name"].elements["hrnum"].
Second, your javascript isn't quite correct. You should place a function call as the click handler for your button:
At the end of the javascript section, replace all that followsHTML Code:<input type="button" value="Calc" onclick="calcTime()" />// Output to text field...with the following function declaration:
Code:function calcTime() { // Make sure you have "timeform" as the name of the form. var time = new Time( document.forms["timeform"].elements["hrnum"].selectedIndex, document.forms["timeform"].elements["minnum"].selectedIndex); time.AddHours(1); document.forms["timeform"].elements["nextHour"].value = time.AsString(); }
Last edited by DimX; 07-08-2008 at 12:06 AM. Reason: Rephrase
TimeTracker (07-08-2008)
Junior Coders
Thank you very much DimX. As you were helping me out I found a way to make it work. However, I will take your suggestions on board because I need to learn from this. I can always rely upon this Dynamic Drive forum to provide a solution, no matter how complex the problem. This is my code.
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function Time(h, m) {
this.hours = typeof h == "number" ? h : 0;
this.minutes = typeof m == "number" ? m : 0;
}
Time.prototype.AddTime = function(time) {
this.AddHours(time.hours);
this.AddMinutes(time.minutes);
}
Time.prototype.AddHours = function(h) {
this.hours = (this.hours + h) % 24;
}
Time.prototype.AddMinutes = function(m) {
this.minutes += m;
this.AddHours(Math.floor(this.minutes / 60));
this.minutes %= 60;
}
Time.prototype.AsString = function() {
return (this.hours < 10 ? "0" + this.hours : this.hours)
+ ":"
+ (this.minutes < 10 ? "0" + this.minutes : this.minutes);
}
// Output to text field...
function makeList(df) {
var hrnum = df.hrnum.selectedIndex + 1;
var minnum = df.minnum.selectedIndex + 1;
var time = new Time(eval(df.hrnum.selectedIndex), eval(df.minnum.selectedIndex));
time.AddHours(0);
var nextHourA = df.nextHourA.value;
df.nextHourA.value = time.AsString();
time.AddHours(1);
var nextHourB = df.nextHourB.value;
df.nextHourB.value = time.AsString();
}
// -->
</script>
</head>
<body>
<form>
<center><table BORDER=0 CELLSPACING=2 CELLPADDING=5 COLS=1 WIDTH="700" >
<tr>
<td ALIGN=CENTER VALIGN=TOP WIDTH="50%" BGCOLOR="#FFFFCC">
<center><table BORDER=0 CELLSPACING=0 CELLPADDING=5 COLS=2 WIDTH="25%" >
<tr>
<td ALIGN=CENTER VALIGN=TOP><select name="hrnum" size="1"><option><font face="Verdana"><font size=-1>00</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</font></font></option></select></td>
<td ALIGN=CENTER VALIGN=TOP><select name="minnum" size="1"><option><font face="Verdana"><font size=-1>00</option><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option><option>32</option><option>33</option><option>34</option><option>35</option><option>36</option><option>37</option><option>38</option><option>39</option><option>40</option><option>41</option><option>42</option><option>43</option><option>44</option><option>45</option><option>46</option><option>47</option><option>48</option><option>49</option><option>50</option><option>51</option><option>52</option><option>53</option><option>54</option><option>55</option><option>56</option><option>57</option><option>58</option><option>59</font></font></option></select></td>
</tr>
</table></center>
<b><font face="Verdana"><font color="#3333FF"><font size=-1>HH : MM</font></font></font></b></td>
</tr>
<tr>
<td>
<center><input type="button" value="Calc" onclick="makeList(this.form)"></center>
<br><center><input type="text" name="nextHourA" size="8"></center>
<br><center><input type="text" name="nextHourB" size="8"></form></center>
</td>
</tr>
</table></center>
</body>
</html>
Posting Permissions
Reply With Quote
Bookmarks