JS实现下拉框时间选择

JavaScript/JQuery 专栏收录该内容
20 篇文章 0 订阅

使用js实现的一个简单的下拉框时间选择如图:

 

 

 

 

 

 

 

 

 

 

 

代码如下:

 

<html>
<head>
    <script type="text/javascript">
        window.onload = function () {
            var selects = document.getElementsByTagName("select");//通过标签名获取select对象
            var date = new Date();
            var nowYear = date.getFullYear();//获取当前的年
            for (var i = nowYear; i >= nowYear - 100; i--) {
                var optionYear = document.createElement("option");
                optionYear.innerHTML = i;
                optionYear.value = i;
                selects[0].appendChild(optionYear);
            }

            for (var i = 1; i <= 12; i++) {
                var optionMonth = document.createElement("option");
                optionMonth.innerHTML = i;
                optionMonth.value = i;
                selects[1].appendChild(optionMonth);
            }

            getDays(selects[1].value, selects[0].value, selects);

				// 初始化change事件监听
				[selects[0], selects[1]].forEach(function (item) {
					item.addEventListener('change', setDays)
				})
        }

        // 获取某年某月存在多少天
        function getDaysInMonth(month, year) {
            var days;
            if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
                days = 31;
            } else if (month == 4 || month == 6 || month == 9 || month == 11) {
                days = 30;
            } else {
					 // 判断是否为润二月
                if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
                    days = 29;
                } else {
                    days = 28;
                }
            }

            return days;
        }

        function setDays() {
            var selects = document.getElementsByTagName("select");
            var year = selects[0].options[selects[0].selectedIndex].value;
            var month = selects[1].options[selects[1].selectedIndex].value;
            getDays(month, year, selects);
        }

        function getDays(month, year, selects) {
            var days = getDaysInMonth(month, year);

            selects[2].options.length = 0;

            for (var i = 1; i <= days; i++) {
                var optionDay = document.createElement("option");
                optionDay.innerHTML = i;
                optionDay.value = i;
                selects[2].appendChild(optionDay);
            }
        }
    </script>
</head>
<body>
    <div class="date1">
        <select></select>
        <span>年</span>
        <select></select>
        <span>月</span>
        <select></select>
        <span>日</span>
    </div>
</body>
</html>

 

 

 

 

 

  • 3
    点赞
  • 2
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值