JS 根据出生日期计算岁、月、天；根据岁、月、天计算出生日期。

最新推荐文章于 2024-05-30 01:47:03 发布

原创最新推荐文章于 2024-05-30 01:47:03 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

vue 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的年龄计算器，可以双向计算年龄：从出生日期到岁、月、天，或者相反。通过简单的表单输入，用户可以选择输入出生日期来得到年龄，也可以输入年龄来推算出生日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果视频：

JS 根据出生日期计算岁、月、天；根据岁、月、天计算出生日期

表单代码：

 <a-col :span="12">
            <a-form-model-item label="出生日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="birth">
              <j-date placeholder="请选择出生日期" v-model="model.birth" @change="birthToAge"  style="width: 100%"/>
            </a-form-model-item>
          </a-col>
           <a-col :span="12">
            <a-form-model-item label="年龄" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="age" class="ageStyle">
              <a-input v-model:value="model.age"  @change="ageToBirth(model.age)">
                <template #addonAfter>岁</template>
              </a-input>
              <a-input v-model:value="model.ageMonth"  @change="ageMonthToBirth(model.ageMonth)">
                <template #addonAfter>月</template>
              </a-input>
              <a-input v-model:value="model.ageDay"  @change="ageDayToBirth(model.ageDay)">
                <template #addonAfter>天</template>
              </a-input>
            </a-form-model-item>
          </a-col>

在这里插入图片描述
上图样式代码：

<style lang="less" scoped>
.ageStyle{
  ::v-deep .ant-input{
    width:30% !important;
  }
  ::v-deep .ant-input-group-addon{
    display: inline-block;
    line-height: 30px;
    padding: 0 11px;
  }
  ::v-deep .ant-input-group-addon, .ant-input-group-wrap{
    padding: 0 20px;
    text-indent: -5px;
  }
}
</style>

方法：

//根据出生日期计算年龄
      birthToAge(birthday){
        console.log("birthday：：",birthday)
        if(birthday){
          birthday=birthday.split('-');
          // 新建日期对象
          let date = new Date();
          // 今天日期，数组，同 birthday
          let today = [date.getFullYear(), date.getMonth() + 1, date.getDate()];
          // 分别计算年月日差值
          let age = today.map((val, index) => {
            return val - birthday[index]
          })
          // 当天数为负数时，月减 1，天数加上月总天数
          if (age[2] < 0) {
            // 简单获取上个月总天数的方法，不会错
            let lastMonth = new Date(today[0], today[1], 0)
            age[1]--
            age[2] += lastMonth.getDate()
          }
          // 当月数为负数时，年减 1，月数加上 12
          if (age[1] < 0) {
            age[0]--
            age[1] += 12
          }
          console.log(age[0]+'岁'+age[1]+'月'+age[2]+'天');
          this.model.age = age[0];
          this.model.ageMonth = age[1];
          this.model.ageDay = age[2];
        }
      },
      //根据年龄计算出生日期
      //ageYear 当前年龄岁
      //ageMonth 出生月份
      //ageDay 天
      calculateAgeToBirth(ageYear,ageMonth,ageDay){//根据年龄算日期
        var subYear = parseInt(ageYear);
        var subMonth = parseInt(ageMonth);
        var subDay = parseInt(ageDay);
        var now = new Date();
        var nowYear = now.getFullYear();
        var nowMonth = now.getMonth()+1;
        var nowDay = now.getDate(); // 按照减法原理，先day相减，不够向month借；然后month相减，不够向year借；最后year相减。
        var day = nowDay - subDay;
        var month = nowMonth - subMonth;
        var year = nowYear - subYear; // 检查是否溢出
        if(day<=0){ // 获得上月的天数
          var lastMonth = nowMonth - 1;
          var lastMonthOfYear = nowYear;
          if(lastMonth<=0){
            lastMonth =lastMonth + 12 //(lastMonth + 12) % 12;
            lastMonthOfYear = lastMonthOfYear - 1;
          }
          day = day + new Date(lastMonthOfYear, lastMonth, 0).getDate();
          month = month - 1;
        }
        if(month<=0){
          month =month + 12 //(month + 12) % 12;
          year--;
        }
        if(month<10){
          month='0'+month
        }
        if(day<10){
          day='0'+day
        }
        console.log(year+'-'+month+'-'+day);
        this.model.birth = year+'-'+month+'-'+day;
      },
      //输入年龄岁触发
      ageToBirth(age){
        if(this.model.ageMonth && this.model.ageDay){
          this.calculateAgeToBirth(age,this.model.ageMonth,this.model.ageDay)
        }else if(this.model.ageMonth ){
          this.calculateAgeToBirth(age,this.model.ageMonth,0)
        }else if(this.model.ageDay){
          this.calculateAgeToBirth(age,this.model.ageMonth,0)
        }else{//没有输入月和天数，只有岁
          this.calculateAgeToBirth(age,0,0)
        }
      },
      //输入年龄月份触发
      ageMonthToBirth(ageMoth){
        if(this.model.age && this.model.ageDay){
          this.calculateAgeToBirth(this.model.age,ageMoth,this.model.ageDay)
        }else if(this.model.age){
          this.calculateAgeToBirth(this.model.age,ageMoth,0)
        }else if(this.model.ageDay){
          this.calculateAgeToBirth(0,ageMoth,this.model.ageDay)
        }else{//没有输入岁和天数，只有月
          this.calculateAgeToBirth(0,ageMoth,0)
        }
      },
      //输入年龄——天数触发
      ageDayToBirth(ageDay){
        if(this.model.age && this.model.ageMonth){
          this.calculateAgeToBirth(this.model.age,this.model.ageMonth,ageDay)
        }else if(this.model.age){
          this.calculateAgeToBirth(this.model.age,0,ageDay)
        }else if(this.model.ageMonth){
          this.calculateAgeToBirth(0,this.model.ageMonth,ageDay)
        }else{//没有输入岁和天数，只有天
          this.calculateAgeToBirth(0,0,ageDay)
        }
      },