js技术输入框中输入身份证号自动带出年龄,生日,性别

迷南。 2023-10-05 22:16 48阅读 0赞

**目录**

1.分析：

2.页面设计：

3.js技术让我们的输入框回显数据：

4.页面展示结果：

--------------------

## 1.分析： ##

1.问题场景:在写项目的时候遇到了这个问题自己觉得挺有意思的在这里我更大家分享一下

2.问题分析:对于我们中国公民的身份证号有十八位数字与数字的组合有不同的含义

**注:**身份证号码纯属描述问题所用(现编的)

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ_size_20_color_FFFFFF_t_70_g_se_x_16][]

这些数字代表了我们不同的信息这也和我们的业务有关系

--------------------

## **2.页面设计：** ##

**1.提示**：这里我们来用form表单拉储存,input输入框来输入信息

**静态页面代码:**

<form>
    //身份证号
    div class="layui-input-inline">
     <input id="cardId" name="cardId" autocomplete="off" class="layui-input" onBlur="fillInfo()"/>
     </div>
    //性别
    <div class="layui-input-inline">
       <select id="sex" name="sex">                    
        </select>
    </div>
    //年龄
    <div class="layui-input-inline">
     <input id="age" name="age" autocomplete="off" class="layui-input"
    type="text"/>
    </div>
    //出生年月
    <div class="layui-input-inline">
    <input id="birthday" name="birthday" class="layui-input" autocomplete="off"
    type="text"/>
    </div>
    </form>

**页面展示:**这样我们的静态页面就设计好了

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

--------------------

## **3.js技术让我们的输入框回显数据：** ##

**1.算出性别:**

**这里应用**[ js parseInt() 函数][js parseInt_] 和取余的小算法奇数为男,偶数为女

if(parseInt(userCard.substr(16,1)) % 2 == 1){
            sexAndAge.sex = '男'
        }else{
            sexAndAge.sex = '女'
        }

**2.输出出生年月日**

//出生年
    var yearBirth = userCard.substring(6,10);
    //出生月
    var monthBirth = userCard.substring(10,12);
    //出生日
    var dayBirth = userCard.substring(12,14);

**3.算出年龄**

//获取当前年月日并计算年龄
        var myDate = new Date();
        var monthNow = myDate.getMonth() + 1;
        var dayNow = myDate.getDay();
        var age = myDate.getFullYear() - yearBirth;
        if(monthNow < monthBirth || (monthNow == monthBirth && dayNow < dayBirth)){
            age--;
        }

--------------------

## **4.页面展示结果：** ##

预想结果:**出生年月日:**1997-02-02 **性别:**女 **年龄:**25 来看页面结果

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

**结果:** 与我们预期的一样

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c8c1e679a2954651962e3c022f5a4006.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/1dda9b2bb9734d65917454ec8ebd1826.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ==,size_20,color_FFFFFF,t_70,g_se,x_16
[js parseInt_]: https://www.w3school.com.cn/jsref/jsref_parseInt.asp
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/805a9248906142a48ed8d9796a59ea90.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2B5bm0KFN1Z2FyKQ==,size_20,color_FFFFFF,t_70,g_se,x_16