JS选择生日下拉框

原创于 2021-07-07 11:05:18 发布 · 1.5k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍如何通过JavaScript实现在网页注册中动态生成的生日日期选择器，包括年份、月份和特殊情况下闰年的2月天数判断。通过下拉框变化触发实时更新，提升用户体验。

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

这个原理其实不难，只要知道几个知识点这个代码就能实现，我们需要知道的是 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函数，就可以使，日期下拉框灵活地变动了。