js实现计算周岁功能

来源：网络文章列表 2020-06-19 8

本文主要为大家详细介绍了js+html实现周岁年龄计算器的方法

本文实现了计算周岁的计算

输入界面展示:

输出结果展示:

实现代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div>
    <!-- 设计输入及点击界面 -->
    <p>请输入您的出生日期(yyy/mm/dd):</p>
    <input type="text" style="width: 60px;" id="year">/
    <input type="text" style="width: 60px;" id="month">/
    <input type="text" style="width: 60px;" id="day"></br>
    <!-- 运用button标签并设置点击事件函数 -->
    <button style="margin-top:10px " onclick="getAge()">计算</button>
  </div>

  <script>
    //计算周岁年龄的函数
    function getAge() {
      //定义返回值
      var returnAge

      //获取输入框参数
      var birthYear = document.getElementById("year").value
      var birthMonth = document.getElementById("month").value
      var birthDay = document.getElementById("day").value

      //获取当前时间
      d = new Date();
      var nowYear = d.getFullYear()
      var nowMonth = d.getMonth() + 1
      var nowDay = d.getDate()

      //计算周岁年龄差
      if (nowYear == birthYear) {
        returnAge = 0; //同年 则为0岁
      } else {
        var ageDiff = nowYear - birthYear //年之差
        if (ageDiff > 0) {
          if (nowMonth == birthMonth) {
            var dayDiff = nowDay - birthDay //日之差
            if (dayDiff < 0) {
              returnAge = ageDiff - 1
            } else {
              returnAge = ageDiff
            }
          } else {
            var monthDiff = nowMonth - birthMonth //月之差
            if (monthDiff < 0) {
              returnAge = ageDiff - 1
            } else {
              returnAge = ageDiff
            }
          }
        } else {
          returnAge = -1 //输入有误
        }

      }
      alert(returnAge)//结果弹窗显示
    }
  </script>
</body>

</html>

腾讯云限量秒杀

1核2G 5M 50元/年 2核4G 8M 74元/年 4核8G 5M 818元/年 CDN流量包 100GB 9元