JS选择生日下拉框

 我们在某平台注册账号有时需要输入生日日期，那么这个选择生日日期的下拉框是怎么实现的呢？

这个原理其实不难，只要知道几个知识点这个代码就能实现，我们需要知道的是 1,3,5,7,8,10,12是大月，4，6，9,11是小月， 2月是特殊的，闰年时2月有29天 ，普通年2月只有 28天， 闰年就是年数能整除4没有余数。

知道以上几点知识再根据自己的代码逻辑就很容易实现，下面来看我的成果

然后在下面就是我的代码

  $(function () {
            let LongDate = new Date("1980-01-01 00:00:00"); // 从1980年开始
            let NowDate = new Date();
            let yearNum = NowDate.getFullYear() - LongDate.getFullYear();

            //获取年引入下拉框中
            for (let i = 0; i <= yearNum; i++) {
                // 每次循环 减1 把 年份减1
                $("#year").append("<option value=" + (NowDate.getFullYear()- i) + ">" + (NowDate.getFullYear()- i) + "</option>");
            }
            //获取月份引入下拉框
            for (let j = 1; j <= 12; j++) {
                $("#moon").append("<option value=" + j + ">" + j + "</option>");
            }
            //这个就需要判断了 

            // 判断 为 闰年的 二月的 日 
            function ChangeDay() {
                let TestYear = $("#year").val();
                let TestMoon = $("#moon").val();
                var daytime=0;
                if (TestMoon == 4 || TestMoon == 6 || TestMoon == 9 || TestMoon == 11) {
                    daytime= 30;
                }else if (TestMoon == 2) {
                    if (TestYear % 4 == 0) {
                        daytime=29;
                    } else {
                        daytime=28;
                    }
                }else{
                    daytime=31
                }
                       $("#day").empty();
                        for (z = 1; z<=daytime; z++) {
                            $("#day").append("<option value=" + z + ">" + z + "</option>");
                        }
            }
             ChangeDay()
            $("#year").change(function () {
                ChangeDay()
            })
            $("#moon").change(function () {
                ChangeDay()
            })


        })

1.首先 我先声明一个日期 从1980年开始 ，再声明一个现在的日期，然后用现在的年数减去1980年 得到的数用来 引入到 下拉框中，就是可以选择的从 1980年到 2021年，的出生年份。

2.然后再设置 月份 ，月份直接就是 固定的12个月，直接 for循环 1~12就行了。

3.然后再到 ，一个月有多少天的设置 ，首先封装一个函数 ，因为它是变动的，然后 获取到年份和月份的值。 然后再声明一个月的天数daytime因月份和年份的变动而变动，当月份是 4,6,9,11月时 ，当月天数为 30天一个月，当月份为2时，需要判断年份是否为闰年 很简单，拿当前年份取余4，如果为0即为闰年即 当月天数为29天一个月，否则28天一个月，最后剩下的就不用写了直接else当前月为31天一个月。

4.最后，在每次判断变动之前 需要清除之前创建的当前月的天数 ，如果不清除会一直叠加。然后for循环 z小于等于判断 出来的当月的天数 就可以 引入到日期的下拉框中。

  之后要在加载页面打开时就调用 这个 ChangeDay函数，这样 日期才会一开始就有数据，最后，利用月份和年份的 下拉框的change事件去调用ChangeDay函数，就可以使，日期下拉框灵活地变动了。