www.webdeveloper.com
Results 1 to 3 of 3

Thread: JavaScript Age calculator problem

  1. #1
    Join Date
    Feb 2011
    Posts
    8

    JavaScript Age calculator problem

    I am trying to create a age calculator using selection lists. I need to have these question answered:

    User's age in years, months, and days;
    How long a person has been living in months, days, hours;
    Days till user's birthday
    I am not sure how to calculate it through date functions. How do I get this to work?

  2. #2
    Join Date
    Feb 2011
    Posts
    8

    code

    Here is what I have:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title>Age Calculator</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    script type="text/javascript">
    /* <![CDATA[ */
    unction submitForm() {
    /* d represents today */
    var = new Date();
    var 
    year d.getFullYear();
    var 
    month d.getMonth();
    var 
    days d.getDays();
    var 
    minutes d.getMinutes();
    var 
    hours d.getHours();

    var 
    byear document.forms[0].year.value;
    var 
    bmonth document.forms[0].month.value;
    var 
    bday document.forms[0].day.value;
    var 
    bhours bday 24;
    var 
    bmin 60 bhours;

    if (
    isLeapYear== true) {
                var 
    dyears year byear;
                var 
    dmonth month bmonth;
                var 
    ddays = (days bday) + 1;

                var 
    dhours hours bhours;
                var 
    dminutes minutes bmin;

                var 
    daysTillBDay 365 bday;
    }

        else (
    isLeapYear()== false) {
            var 
    dyears year byear;
            var 
    dmonth month bmonth;
            var 
    ddays = (days bday);

            var 
    dhours hours bhours;
            var 
    dminutes minutes bmin;

            var 
    daysTillBDay 365 bday;
    }

                    
    document.uyears.value =  dyears " years old.";
                    
    document.umonth.value =  dmonth " months old.";
                    
    document.udays.value =  ddays " days old.";

                    
    document.lmonth.value "The user has been living for " dyears " years.";
                    
    document.ldays.value "The user has been living for " ddays " days.";
                    
    document.lhrs.value "The user has been living for " dhours " years.";
                    
    document.lmin.value "The user has been living for " dminutes " days.";

                    
    document.bdays.value daysTilBDay " days left till your birthday.";



    //This is fucntion determines if the year is a leap year and to help determine the amount of days in a year.
    function isLeapYear() {
     if (
    year 400 == || (year 100 != && year == 0))
      return 
    true;
     else
      return 
    false;
    }



    /* ]]> */
    </script>
    </head>
    <body>
    <!--My form -->
     <!-- This is where my input items are defined and created.-->
     <div class="form">
    <form action="" onsubmit="return submitForm();">
    <p> Please choose one item from each section for your birthday date. 
            <p>Day
            <select name="day">  
                <option value="0" selected="selected">[choose one]</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
            </select></p>
        

    <p>Month
            <select name="month">  
                <option value="0" selected="selected">[choose one]</option>
                        <option value="1">January</option>
                        <option value="2">Febuary</option>
                        <option value="3">March</option>
                        <option value="4">April</option>
                        <option value="5">May</option>
                        <option value="6">June</option>
                        <option value="7">July</option>
                        <option value="8">August</option>
                        <option value="9">Sepetmber</option>
                        <option value="10">October</option>
                        <option value="11">September</option> 
                        <option value="12">December</option>
            </select></p>
            
    <p>Year
            <select name="year">  
                <option value="0" selected="selected">[choose one]</option>
                <script type="text/javascript" >
                /* <![CDATA[ */
                //javascript loop for year selected
                    var today = new Date();
                    var year =  today.getFullYear();
                    var stopyears = year - 61;
                    for (; stopyears <= year; stopyears++ ){
                        document.write("<option value=\"" + stopyears + "\" >" + stopyears + "</option>" );
                    }
                    /* ]]> */
                </script>
            </select></p> 
            <p><input type="submit" value="Calculate" /> 
    </div>
    <div class="results" align="right">

        <h4> Results</h4>
            <h6>Users Age in:</h6>
                <p> Year: <input type="text" name="uyears" /> </p>
                <p> Months: <input type="text" name="umonths" /> </p>
                <p> Days: <input type="text" name="udays" /> </p>
        &nbsp;
            <h6>How long the user has been living:</h6>
                <p> Months: <input type="text" name="lmonths" /> </p>
                <p> Days: <input type="text" name="ldays" /> </p>
                <p> Hours <input type="text" name="lhrs" /> </p>
                <p> Minutes <input type="text" name="lmin" /> </p>
        &nbsp;
            <h6>Days till the user's next birthday: </h6>
                <p> Days: <input type="text" name="bdays" /> </p>
        
    </div>

    </form>
    </body>
    </html> 

  3. #3
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    I wrote a plugin for this some time ago - see http://www.mitya.co.uk/scripts/Calcu...-two-dates-100

    Example - hours since birth (assuming birth was at 29/05/1980 17:37:00):

    Code:
    var hours = between2Dates('29/05/1980 17:37:00', 'now', 'hours');
    alert("You have been alive "+hours+" hours!");

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles