Results 1 to 8 of 8

Thread: Incrementing Hours To Time Format

  1. #1
    Join Date
    Mar 2007
    Posts
    51
    Thanks
    18
    Thanked 1 Time in 1 Post

    Default 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?

  2. #2
    Join Date
    Jun 2006
    Posts
    182
    Thanks
    0
    Thanked 14 Times in 14 Posts

    Default

    Here, an example using a Time object.
    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

  3. The Following User Says Thank You to DimX For This Useful Post:

    TimeTracker (07-07-2008)

  4. #3
    Join Date
    Mar 2007
    Posts
    51
    Thanks
    18
    Thanked 1 Time in 1 Post

    Default

    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.

  5. #4
    Join Date
    Mar 2007
    Posts
    51
    Thanks
    18
    Thanked 1 Time in 1 Post

    Default

    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>

  6. #5
    Join Date
    Jun 2006
    Posts
    182
    Thanks
    0
    Thanked 14 Times in 14 Posts

    Default

    Sorry, as it was just very quickly written, I had some typos there.
    The time.hminutes should be time.minutes.
    And in the usage sample time.AddHour should be time.AddHours

    A working example can be found here: http://dimx.awardspace.com/dd/time.htm

  7. The Following User Says Thank You to DimX For This Useful Post:

    TimeTracker (07-07-2008)

  8. #6
    Join Date
    Mar 2007
    Posts
    51
    Thanks
    18
    Thanked 1 Time in 1 Post

    Default

    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>

  9. #7
    Join Date
    Jun 2006
    Posts
    182
    Thanks
    0
    Thanked 14 Times in 14 Posts

    Default

    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 either document.getElementById("some_id") or document.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:
    HTML Code:
    <input type="button" value="Calc" onclick="calcTime()" />
    At the end of the javascript section, replace all that follows // 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

  10. The Following User Says Thank You to DimX For This Useful Post:

    TimeTracker (07-08-2008)

  11. #8
    Join Date
    Mar 2007
    Posts
    51
    Thanks
    18
    Thanked 1 Time in 1 Post

    Default

    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>

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
  •