简体   繁体   English

如何使用javascript中选择的日期计算当前日期?

[英]How to calculate current date with date selected in javascript?

I am trying to work out how old a user is based on the selection statement. 我试图根据选择语句计算出用户的年龄。

I cannot calculate the current (year/month/day/hour/minute) from the user input. 我无法从用户输入计算当前(年/月/日/小时/分钟)。

The intent is that the user will see 3 box to select [Month] [Day] and [Year] of birth. 意图是用户将看到3个框以选择[月] [日]和[年]出生。

Based on the answer I want to calculate the current date minus the date selected by the user. 根据答案,我想计算当前日期减去用户选择的日期。

For some reason I can't make the logic work. 由于某种原因,我无法使逻辑工作。 I can hard code it, but I want it to be logical. 我可以硬编码,但我希望它是合乎逻辑的。

Here is my code: 这是我的代码:

<!DOCTYPE>
<html>
<title>Validate Credit Cards</title>
<head>
    <script type="text/javascript">
    /* <![CDATA[ */
    /* ]]> */
    </script>
</head>
<body>
    <form action="">
            <h1>Age Calculator</h1>
            <p>Birth Date:
                <select name="month">
                    <option>Month</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>
                </select>
                <select name="day">
                    <option>Day</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</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>
            </select>
            <select name="year">
                <option>Year</option>
                <option>1950</option>
                <option>1951</option>
                <option>1952</option>
                <option>1953</option>
                <option>1954</option>
                <option>1955</option>
                <option>1956</option>
                <option>1957</option>
                <option>1958</option>
                <option>1959</option>
                <option>1960</option>
                <option>1961</option>
                <option>1962</option>
                <option>1963</option>
                <option>1964</option>
                <option>1965</option>
                <option>1966</option>
                <option>1967</option>
                <option>1968</option>
                <option>1969</option>
                <option>1970</option>
                <option>1971</option>
                <option>1972</option>
                <option>1973</option>
                <option>1974</option>
                <option>1975</option>
                <option>1976</option>
                <option>1977</option>
                <option>1978</option>
                <option>1979</option>
                <option>1980</option>
                <option>1981</option>
                <option>1982</option>
                <option>1983</option>
                <option>1984</option>
                <option>1985</option>
                <option>1986</option>
                <option>1987</option>
                <option>1988</option>
                <option>1989</option>
                <option>1990</option>
                <option>1991</option>
                <option>1992</option>
                <option>1993</option>
                <option>1994</option>
                <option>1995</option>
                <option>1996</option>
                <option>1997</option>
                <option>1998</option>
                <option>1999</option>
                <option>2000</option>
                <option>2001</option>
                <option>2002</option>
                <option>2003</option>
                <option>2004</option>
                <option>2005</option>
                <option>2006</option>
                <option>2007</option>
                <option>2008</option>
                <option>2009</option>
                <option>2010</option>
            </select>               
        </p>
        <p><input type="button" value="Calculate" onclick="calcAge()" /></p>
        <h2>You have lived</h2>
        <p><input type="text" name="yearCalc" size="7" /> years</p>
        <p><input type="text" name="monthCalc" size="7" /> months</p>
        <p><input type="text" name="dayCalc" size="7" /> days</p>
        <p><input type="text" name="hourCalc" size="7" /> hours</p>
        <p><input type="text" name="minCalc" size="7" /> minutes</p>
    </form> 
<script>    
    function calcAge()
        {
        var d1 = new Date();
        var month = document.forms[0].month.value;
        var day = document.forms[0].day.value;
        var year = document.forms[0].year.value;
        var yearCalc = 2012 - year;
        var monthCalc = parseInt(month);
        var dayCalc = Math.abs(d1 - parseInt(day));
        var hourCalc = Math.round();
        var minCalc = Math.round();
        document.forms[0].yearCalc.value =  yearCalc.toLocaleString();
        document.forms[0].monthCalc.value =  monthCalc.toLocaleString();
        document.forms[0].dayCalc.value =  dayCalc.toLocaleString();
        document.forms[0].hourCalc.value =  hourCalc.toLocaleString();
        document.forms[0].minCalc.value =  minCalc.toLocaleString();
        }
</script>

The Date object ( http://www.w3schools.com/jsref/jsref_obj_date.asp ) has some nice functions prepackaged, more notably the getTime() function which returns Date object's time in terms of milliseconds since 1970, which is basically the same as Unix time except for the units (Unix time is seconds). Date对象( http://www.w3schools.com/jsref/jsref_obj_date.asp )预先打包了一些很好的函数,更值得注意的是getTime()函数以1970年以来的毫秒数返回Date对象的时间,这基本上是相同的作为Unix时间除了单位(Unix时间是秒)。 To determine age, all we need to do is store the user's selections as a Date object and then take the difference between now and whatever the user put in. 要确定年龄,我们需要做的就是将用户的选择存储为Date对象,然后区分now和用户输入的内容。

var d1 = new Date();
d1.setMonth(document.forms[0].month.value);
d1.setDay(document.forms[0].day.value);
d1.setYear(document.forms[0].year.value);
var now = new Date();
var ageInMs = now.getTime() - d1.getTime();
var ageInYears = ageInMs / 86400000 / 365;

Since the getTime() function returns milliseconds, we need to convert this to years. 由于getTime()函数返回毫秒,我们需要将其转换为年。 There are 86,400,000 milliseconds in a day, and 365 days in a year (roughly). 一天有86,400,000毫秒,一年有365天(大致)。

EDIT: You may need to use parseInt() on the values of the comboboxes if they are actually strings. 编辑:如果它们实际上是字符串,您可能需要对组合框的值使用parseInt()。 This would be an easy change though - instead of 这可能是一个简单的改变 - 而不是

d1.setMonth(document.forms[0].month.value);

you'd do 你做的

d1.setMonth(parseInt(document.forms[0].month.value, 10));

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM