Altersberechnung

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • JavaScript Altersberechnung

    N'abend,

    ich hab in einem Formular 3 Select Felder für das Geburtsdatum.
    Ich würde jetzt gerne, wenn jemand ein Geburtsdatum auswählt, direkt daneben, ohne die Seite zu aktualisieren das Alter ausgeben (in Jahren reicht, allerdings sollte das Script nicht nur 2008 - Geburtsjahr rechnen...).

    Hier mal mein Code:

    PHP-Quellcode

    1. <td><select id="tag" name="tag"><option selected>--</option>
    2. <option>01</option>
    3. <option>02</option>
    4. <option>03</option>
    5. <option>04</option>
    6. <option>05</option>
    7. <option>06</option>
    8. <option>07</option>
    9. <option>08</option>
    10. <option>09</option>
    11. <option>10</option>
    12. <option>11</option>
    13. <option>12</option>
    14. <option>13</option>
    15. <option>14</option>
    16. <option>15</option>
    17. <option>16</option>
    18. <option>17</option>
    19. <option>18</option>
    20. <option>19</option>
    21. <option>20</option>
    22. <option>21</option>
    23. <option>22</option>
    24. <option>23</option>
    25. <option>24</option>
    26. <option>25</option>
    27. <option>26</option>
    28. <option>27</option>
    29. <option>28</option>
    30. <option>29</option>
    31. <option>30</option>
    32. <option>31</option></select>.&nbsp;
    33. <select id="monat" name="monat"><option selected>--</option>
    34. <option>01</option>
    35. <option>02</option>
    36. <option>03</option>
    37. <option>04</option>
    38. <option>05</option>
    39. <option>06</option>
    40. <option>07</option>
    41. <option>08</option>
    42. <option>09</option>
    43. <option>10</option>
    44. <option>11</option>
    45. <option>12</option></select>.&nbsp;
    46. <select id="jahr" name="jahr"><option>1950</option>
    47. <option>1951</option>
    48. <option>1952</option>
    49. <option>1953</option>
    50. <option>1954</option>
    51. <option>1955</option>
    52. <option>1956</option>
    53. <option>1957</option>
    54. <option>1958</option>
    55. <option>1959</option>
    56. <option>1960</option>
    57. <option>1961</option>
    58. <option>1962</option>
    59. <option>1962</option>
    60. <option>1963</option>
    61. <option>1964</option>
    62. <option>1965</option>
    63. <option>1966</option>
    64. <option>1967</option>
    65. <option>1968</option>
    66. <option>1969</option>
    67. <option>1970</option>
    68. <option>1971</option>
    69. <option>1972</option>
    70. <option>1973</option>
    71. <option>1974</option>
    72. <option>1975</option>
    73. <option>1976</option>
    74. <option>1977</option>
    75. <option>1978</option>
    76. <option>1979</option>
    77. <option>1981</option>
    78. <option>1982</option>
    79. <option>1983</option>
    80. <option>1984</option>
    81. <option>1985</option>
    82. <option>1986</option>
    83. <option>1987</option>
    84. <option>1988</option>
    85. <option>1989</option>
    86. <option>1990</option>
    87. <option>1991</option>
    88. <option>1992</option>
    89. <option>1993</option>
    90. <option>1994</option>
    91. <option>1995</option>
    92. <option>1996</option>
    93. <option>1997</option>
    94. <option>1998</option>
    95. <option>1999</option></select></td>
    Alles anzeigen


    Vielen Dank für eure Hilfe.

    mfg
    Snip3r
    Neulinge * Forenregeln * F.A.Q. * Lexikon
    Suchfunktion* IRC * Teamspeak * User helfen User
    Patrioten reden nur davon, dass sie für ihr Land sterben, niemals davon, dass sie für ihr Land töten. (Bertrand Russell)
  • Geht wesentlicher schöner ;)

    Quellcode

    1. script language="JavaScript">
    2. <!--
    3. var acc=2
    4. var show_time=false;
    5. var timerID=null;
    6. var blank=":";
    7. function stop() {
    8. if (show_time)
    9. clearTimeout(timerID);
    10. document.my_age.date_time.value=" ";
    11. show_time=false;
    12. }
    13. function startc() {
    14. var today=new Date();
    15. if (acc == 2){
    16. alert ("Bitte wählen Sie einen Berechnungsmodus: Exakt or Normal")
    17. } else {
    18. var acc1=acc;
    19. var display_value =" Time: " + today.getHours()
    20. if(today.getMinutes() < 10){
    21. display_value+=":0" + today.getMinutes();
    22. }else{display_value+=":" + today.getMinutes();
    23. }if (today.getSeconds() < 10){display_value+=":0" + today.getSeconds();
    24. }else{display_value+=":" + today.getSeconds();
    25. }if(today.getHours()>=12) {
    26. display_value+=" P.M. "
    27. }else{display_value+=" A.M. "
    28. }
    29. display_value += " Date: "
    30. + (today.getMonth()+1) + "/"
    31. + today.getDate() + "/" + today.getYear();
    32. document.my_age.date_time.value=display_value;
    33. writeyourAge(acc1)
    34. timerID=setTimeout("startc()",100);
    35. show_time=true;
    36. }
    37. }
    38. function writeyourAge(onval) {
    39. if (onval == 0) {
    40. normal()
    41. } else {
    42. accurate()
    43. }
    44. }
    45. function normal() {
    46. TheDate = new Date();
    47. Month = TheDate.getMonth()+1;
    48. Day = TheDate.getDate();
    49. Year = TheDate.getYear();
    50. Hour = TheDate.getHours();
    51. Minute = TheDate.getMinutes();
    52. Second = TheDate.getSeconds();
    53. by = (document.my_age.birthy.value);
    54. bm = (document.my_age.birthm.value);
    55. bd = (document.my_age.birthd.value);
    56. bh = (document.my_age.birthh.value);
    57. bmn = (document.my_age.birthmin.value);
    58. bs = (document.my_age.births.value);
    59. BDate = Date.UTC(by,bm,bd,bh,bmn,bs);
    60. if (Year<2000) {
    61. CDate = Date.UTC(Year,Month,Day,Hour,Minute,Second);
    62. } else {
    63. CDate = Date.UTC(Year,Month,Day,Hour,Minute,Second);
    64. }
    65. Age = CDate-BDate;
    66. document.my_age.yrs.value = parseInt(((((Age/1000)/60)/60)/24)/365.25,10);
    67. document.my_age.dys.value = parseInt((((Age/1000)/60)/60)/24,10);
    68. document.my_age.hrs.value = parseInt(((Age/1000)/60)/60,10);
    69. document.my_age.mins.value = parseInt((Age/1000)/60,10);
    70. document.my_age.secs.value = parseInt(Age/1000,10);
    71. }
    72. function accurate() {
    73. TheDate = new Date();
    74. Month = TheDate.getMonth()+1;
    75. Day = TheDate.getDate();
    76. Year = TheDate.getYear();
    77. Hour = TheDate.getHours();
    78. Minute = TheDate.getMinutes();
    79. Second = TheDate.getSeconds();
    80. by = (document.my_age.birthy.value);
    81. bm = (document.my_age.birthm.value);
    82. bd = (document.my_age.birthd.value);
    83. bh = (document.my_age.birthh.value);
    84. bmn = (document.my_age.birthmin.value);
    85. bs = (document.my_age.births.value);
    86. BDate = Date.UTC(by,bm,bd,bh,bmn,bs);
    87. if (Year<2000) {
    88. CDate = Date.UTC(Year,Month,Day,Hour,Minute,Second);
    89. } else {
    90. CDate = Date.UTC(Year,Month,Day,Hour,Minute,Second);
    91. }
    92. Age = CDate-BDate;
    93. document.my_age.yrs.value = ((((Age/1000)/60)/60)/24)/365.25;
    94. document.my_age.dys.value = (((Age/1000)/60)/60)/24;
    95. document.my_age.hrs.value = ((Age/1000)/60)/60;
    96. document.my_age.mins.value = (Age/1000)/60;
    97. document.my_age.secs.value = Age/1000;
    98. }
    99. //-->
    100. </script>
    101. <FONT class="stn">Ihr Geburtsjahr als 4-stellige Zahl.</font><br>
    102. <FONT class="stn">Voreinstellung ist 01.01.1900, Mitternacht</font>
    103. </center>
    104. <form name="my_age">
    105. <table width=90% border=0 cellspacing=0 cellpadding=2>
    106. <tr>
    107. <td><li><font color="#FFFFFF">.</td>
    108. <td><FONT class="stn">Ich wurde geboren am...</font></td>
    109. <td><center>
    110. <input type="button" name="date_time" size=25 value="" onclick=startc()><br>
    111. <FONT class="stn">Jahr</font><input name="birthy" type="text" size=4>
    112. <FONT class="stn">Monat</font><input name="birthm" type="text" size=2>
    113. <FONT class="stn">Tag</font><input name="birthd" type="text" size=2><br>
    114. <FONT class="stn">Stunde</font><input name="birthh" type="text" size=2>
    115. <FONT class="stn">Minute</font><input name="birthmin" type="text" size=2>
    116. <FONT class="stn">Sekunde</font><input name="births" type="text" size=2>
    117. </center>
    118. </td>
    119. <td>
    120. </td>
    121. </tr>
    122. <tr>
    123. <td width=2%><li><font color="black">.</td>
    124. <td width=15%><FONT class="stn">Ich bin...</font></td>
    125. <td>
    126. <center><input name="yrs" type="text" size=20></td>
    127. <td width=22%><FONT class="stn">...Jahre alt</font></td>
    128. </tr>
    129. <tr>
    130. <td><li><font color="black">.</td>
    131. <td><FONT class="stn">oder..</font></td>
    132. <td>
    133. <center><input name="dys" type="text" size=20></td>
    134. <td><FONT class="stn">...Tage alt</font></td>
    135. </tr>
    136. <tr>
    137. <td><li><font color="black">.</td>
    138. <td><FONT class="stn">oder..</font></td>
    139. <td>
    140. <center><input name="hrs" type="text" size=20></td>
    141. <td><FONT class="stn">...Stunden alt</font></td>
    142. </tr>
    143. <tr>
    144. <td><li><font color="black">.</td>
    145. <td><FONT class="stn">oder..</font></td>
    146. <td>
    147. <center><input name="mins" type="text" size=20></td>
    148. <td><FONT class="stn">...Minuten alt</font></td>
    149. </tr>
    150. <tr>
    151. <td><li><font color="black">.</td>
    152. <td><FONT class="stn">oder..</font></td>
    153. <td>
    154. <center><input name="secs" type="text" size=20></td>
    155. <td><FONT class="stn">...Sekunden alt</font></td>
    156. </tr>
    157. </table>
    158. <table width=100% cellpadding=20 cellspacing=0>
    159. <tr>
    160. <td>
    161. <center>
    162. <FONT class="stn">exakt</font><input name="accurate" type="radio" value="ON" onclick="if (this.checked) {acc=1}">
    163. <FONT class="stn">normal</font><input name="accurate" type="radio" value="OFF" onclick="if (this.checked) {acc=0}">
    164. <input name="norm" type="button" value=" Start " onclick="startc()">
    165. <input name="norm" type="button" value=" Stop " onclick="stop()">
    166. </center>
    167. </tr>
    168. </td>
    169. </table>
    170. </form>
    171. <script>
    172. normal();
    173. </script>
    Alles anzeigen
    Judenverfolgung, Inquisitionen, Kreuzigungen,
    Hexenverbrennung, wir wissen wie man feiert
    - Ihre Kirche †
    Blacklist
  • ^woher hast du denn das???ß
    Aus dem ersten JavaScript-Buch, dass es gab?

    Na ja, hier Sniper, so wie du es wolltest:

    Quellcode

    1. <script type="text/javascript">
    2. // <![CDATA[
    3. function calculate() {
    4. var day = parseInt(document.calculateage.tag.options[document.calculateage.tag.selectedIndex].value);
    5. var month = parseInt(document.calculateage.monat.options[document.calculateage.monat.selectedIndex].value);
    6. var year = parseInt(document.calculateage.jahr.options[document.calculateage.jahr.selectedIndex].value);
    7. var now = new Date();
    8. if(year > 0 && month > 0 && day > 0) {
    9. var age = now.getFullYear() - year;
    10. if(((now.getMonth()+1) < month) || ((now.getMonth()+1) == month && now.getDate() < day)) age-=1;
    11. document.getElementById('age').innerHTML = age.toString()+' Jahre alt';
    12. }
    13. }
    14. // ]]>
    15. </script>
    16. <form name="calculateage">
    17. <div style="float:left;">
    18. <select id="tag" name="tag" onchange="calculate()"><option selected>--</option>
    19. <option>01</option>
    20. <option>02</option>
    21. <option>03</option>
    22. <option>04</option>
    23. <option>05</option>
    24. <option>06</option>
    25. <option>07</option>
    26. <option>08</option>
    27. <option>09</option>
    28. <option>10</option>
    29. <option>11</option>
    30. <option>12</option>
    31. <option>13</option>
    32. <option>14</option>
    33. <option>15</option>
    34. <option>16</option>
    35. <option>17</option>
    36. <option>18</option>
    37. <option>19</option>
    38. <option>20</option>
    39. <option>21</option>
    40. <option>22</option>
    41. <option>23</option>
    42. <option>24</option>
    43. <option>25</option>
    44. <option>26</option>
    45. <option>27</option>
    46. <option>28</option>
    47. <option>29</option>
    48. <option>30</option>
    49. <option>31</option></select>.&nbsp;
    50. <select id="monat" name="monat" onchange="calculate()"><option selected>--</option>
    51. <option>01</option>
    52. <option>02</option>
    53. <option>03</option>
    54. <option>04</option>
    55. <option>05</option>
    56. <option>06</option>
    57. <option>07</option>
    58. <option>08</option>
    59. <option>09</option>
    60. <option>10</option>
    61. <option>11</option>
    62. <option>12</option></select>.&nbsp;
    63. <select id="jahr" name="jahr" onchange="calculate()"><option>1950</option>
    64. <option>1951</option>
    65. <option>1952</option>
    66. <option>1953</option>
    67. <option>1954</option>
    68. <option>1955</option>
    69. <option>1956</option>
    70. <option>1957</option>
    71. <option>1958</option>
    72. <option>1959</option>
    73. <option>1960</option>
    74. <option>1961</option>
    75. <option>1962</option>
    76. <option>1962</option>
    77. <option>1963</option>
    78. <option>1964</option>
    79. <option>1965</option>
    80. <option>1966</option>
    81. <option>1967</option>
    82. <option>1968</option>
    83. <option>1969</option>
    84. <option>1970</option>
    85. <option>1971</option>
    86. <option>1972</option>
    87. <option>1973</option>
    88. <option>1974</option>
    89. <option>1975</option>
    90. <option>1976</option>
    91. <option>1977</option>
    92. <option>1978</option>
    93. <option>1979</option>
    94. <option>1981</option>
    95. <option>1982</option>
    96. <option>1983</option>
    97. <option>1984</option>
    98. <option>1985</option>
    99. <option>1986</option>
    100. <option>1987</option>
    101. <option>1988</option>
    102. <option>1989</option>
    103. <option>1990</option>
    104. <option>1991</option>
    105. <option>1992</option>
    106. <option>1993</option>
    107. <option>1994</option>
    108. <option>1995</option>
    109. <option>1996</option>
    110. <option>1997</option>
    111. <option>1998</option>
    112. <option>1999</option></select></div>
    113. <div id="age">&nbsp;</div>
    114. </form>
    Alles anzeigen


    Hoffe es ist alles nach deiner Vorstellung. Zwar nicht valid xhtml1.1 (wegen name="") Aber kannst bei Bedarf ja selber ändern :P

    Gruß
    der Broken Sword
  • Ich reih mich mal in den OT ein...
    @davin: was findest du daran schöner? Das sind hässliche HTML <(!!!!) 4 Standards die womöglich 1995 aktuell waren, aber jetzt nichts mehr in einer HTML-Seite zusuchen haben.
    Auch das JavaScript sieht mir sehr komplizierter aus, als es sein müsste. warum nicht einfach eine Variable übergeben und dann die eine Zeile if - else halten die sich ändert.

    Und zu guter letzt sind wir hier nicht bei Wünsch-dir-was. Sniper hatte ein konkretes Problem, welches ich erfolgreich gelöst habe, das "schönere" Script jedoch gar nicht kann :P
    => Googlen kann jeder...

    Gruß
    Broken Sword

    @C-R-Ks Post #8:
    Hahahahaha, ach Gottchen. Ich sollte wohl erst mein Studium beendet haben, bevor ich hier jemanden helfe...
    Oder anders ausgdrückt:
    Geht mir doch waage am Anus vorbei, wo du mich siehst. ;)
  • Ich melde mich wieder zu Wort...

    Erstmal vielen Dank an C-R-K. Aber wie Broken Sword schon schrieb, ich hatte eine konkretes Problem und wollte auch keine Sekundenberechnung haben. Brokens Script kapier ich einigermaßen (kenn mich mit JS nicht aus).
    Dafür vielen Dank Broken :) :danke: :danke:
    Genau das was ich suchte ;)

    mfg
    Snip3r

    @Mod: kann geschlossen werden...
    Neulinge * Forenregeln * F.A.Q. * Lexikon
    Suchfunktion* IRC * Teamspeak * User helfen User
    Patrioten reden nur davon, dass sie für ihr Land sterben, niemals davon, dass sie für ihr Land töten. (Bertrand Russell)
  • @Brokem Sword
    Du schriebst das:
    warum nicht einfach eine Variable übergeben und dann die eine Zeile if - else halten die sich ändert.
    Damit bist du für mich aus den Kreis der professionellen Scripter und Programmierer draußen.
    Judenverfolgung, Inquisitionen, Kreuzigungen,
    Hexenverbrennung, wir wissen wie man feiert
    - Ihre Kirche †
    Blacklist