从“日期”计算年龄HTML元素

问题描述：

我有一个带有“Date”元素和提交按钮的HTML表单。有2个功能。一个用于计算“日期”HTML元素中给定出生日期的年龄。另一个功能是比较年龄和最小允许年龄。我需要帮助来完成它。在代码中看到我的问题。是的，我见过其他类似的问题。我想学习，而不仅仅是复制/粘贴。如果我明白我的代码/语法有什么问题，那么我会更好地学习。提前致谢。从“日期”计算年龄HTML元素

<!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></title> 
</head> 
<body> 
<script type="text/javascript"> 

    var minAge = 18; 

    var curDate = new Date(); 

    var curr_year = curDate.getFullYear(); 
    var curr_month = curDate.getMonth(); 


    //Calculates age from given Birth Date in the form// 
    function _calcAge() { 

     var dt1 = document.getElementById('date').value; 
     var birth_date = new Date(dt1); 

     var birth_year = birth_date.getFullYear(); 
     var birth_month = birth_date.getMonth(); 
     var calc_year = curr_year - birth_year; 
     var calc_month = curr_month - birth_month; 

     //The following below is what I am not sure about. 
     //I need to combine years and months and 
     //convert them into a string??? Is this syntax dead wrong? 

    var final_result = (calc_year && "." && calc_month).toString(); 

     // final result should be a number with a decimal point, example: 35.5 
     final_result = parseFloat; 

     return (final_result); 
     alert(final_result); 
    } 

    //Compares calculated age with minimum age and acts according to rules// 
    function _setAge() { 

     var age = _calcAge(); 
     //alert("my age is " + age); 
     if (age < minAge) { 
      alert("You are not allowed into the site. The minimum age is 18!"); 
     } else 

      alert("Welcome to my Site"); 
      window.open(main.htm, _self); 

    } 


    </script> 

    <form> 
     Date Of Birth: <input type="date" name="date of birth" id="date" /> 
     <input type="submit" name="submit" id="submit" onClick="_setAge();" /> 

    </form> 

    </body> 
    </html>

答

我已经成功地得到它的工作。信用此亦为https://*.com/users/444991/matt我向他借这里的一部分： https://*.com/a/4076440/3189118

<!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></title> 
    </head> 
    <body> 
     <script type="text/javascript"> 

     var minAge = 18; 
     var today = new Date() 
     //Calculates age from given Birth Date in the form// 
     function _calcAge(birthDate, givenDate) { 
     givenDate = new Date(today); 
     var dt1 = document.getElementById('date').value; 
     var birthDate = new Date(dt1); 
     var years = (givenDate.getFullYear() - birthDate.getFullYear()); 

     if (givenDate.getMonth() < birthDate.getMonth() || 
    givenDate.getMonth() == birthDate.getMonth() && givenDate.getDate() < birthDate.getDate()) { 
      years--; 
     } 

     return years; 
    } 

    //Compares calculated age with minimum age and acts according to rules// 
    function _setAge() { 

     var age = _calcAge(); 
     if (age < minAge) { 
      alert("You are not allowed into the site. The minimum age is 18!"); 
     } else 

      alert("Welcome to my Site"); 


    } 


</script> 

<form> 
    Date Of Birth: <input type="date" name="date of birth" id="date" /> 
    <input type="submit" name="submit" id="submit" onClick="_setAge();" /> 

</form>

答

您可以通过基本的数学函数添加或减去javascript日期。

只需为今天var Today = new Date()创建一个新日期，然后减去表格中的日期。你得到毫秒差异。

现在，你只需要通过他们将它们除以(1000*60*60*24*365)

所以只是做转换为年/月：

var difference = (curDate - birth_date)/((1000*60*60*24*365); 
var differenceString = "The difference is: " + difference.toFixed(1) + " years.";

的toFixed(1);回报你以小数点后1位数字。

永远记住JavaScripts日期月份是从零开始的。

你的第二个功能也应该起作用。

Here is a working fiddle

感谢替换代码，但...如果我们按照自己的方式（而且看起来不错），我们如何解释366天的时间？我不能以某种方式使用“date”元素的功能来解释所有这些？ –

如果有366年的话，减法会自动减去366天。如果舍入到小数点后一位，你掩盖了0.1 * 365，这样就有36.5天的公差，就像+/- 18天一样......直到有你有一个高于4 * 18天的年龄，直到小数点后一位可能错了1我猜。可能不会涵盖所有的情况，但我认为足够精确。如果结果正确或错误取决于你如何定义一年。如果你正在计算的年份被定义为365天，就好像这样。 – Igle

答

这工作，你可以简单地用这个

<!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></title> 
</head> 
<body> 
    <script type="text/javascript"> 

     var minAge = 18; 
     function _calcAge() { 
      var date = new Date(document.getElementById("date").value); 
      var today = new Date(); 

      var timeDiff = Math.abs(today.getTime() - date.getTime()); 
      var age1 = Math.ceil(timeDiff/(1000 * 3600 * 24))/365; 
      return age1; 
     } 
     //Compares calculated age with minimum age and acts according to rules// 
     function _setAge() { 

      var age = _calcAge(); 
      //alert("my age is " + age); 
      if (age < minAge) { 
       alert("You are not allowed into the site. The minimum age is 18!"); 
      } else 

       alert("Welcome to my Site"); 
      window.open(main.htm, _self); 

     } 


    </script> 
    <form> 
    Date Of Birth: 
    <input type="date" name="date of birth" id="date" /> 
    <input type="submit" name="submit" id="submit" onclick="_setAge();" /> 
    </form> 
</body> 
</html>

从“日期”计算年龄HTML元素

相关推荐