使用js和option写一个年月日的下拉框

来源：互联网发布：阿里云域名注册价格编辑：程序博客网时间：2024/06/06 03:04
先看一下效果
这里写图片描述
接下来直接看代码
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Option</title>    <script>        // 获取日期        var today = new Date();        // 获取当前年月日        var year  = today.getFullYear();        var month = today.getMonth();        var data  = today.getDate();        window.onload = function(){            // 循环年份并且显示到页面            for( var i = year+10 ; i >= year-10 ; i--){                var option = new Option( i , i );                // 如果年份等于当前年份 就默认选择                if( i == year ){                    option.selected = true;                }                // 添加到id为year的select中                $('year').add(option);                console.log($('year').value)            }            // 循环月份            for(var j = 1 ; j <= 12 ;j++){                var option = new Option( j , j );                if( ( j - 1 ) == month ) {                    option.selected = true;                }                $('month').add(option);            }            // 页面加载调用doChange事件            doChange();        }        // 年份和月份改变的时候调用此事件        function doChange(){            // 把$('date')中的option长度变为0            $('date').options.length = 0;            var length = 31;            // 获取月份            var mon = $('month').value;            // 如果是2月            if(mon == 2)            {                // 平年就是28                length = 28;                // 获取年份                var num = $('year').value;                // 判断是不是闰年 闰年就是29                if(( num % 4  == 0 && num % 100 != 0 ) ||  num % 400 == 0 )                {                    length++;                 }            }            // 定义正则判断月份 4 6 9 11 月            var reg = / [469]|^11$/;            // 符合条件就是30天            if(reg.test(mon))            {                length = 30;            }            // 然后循环 把值塞进去            for( var k = 1 ; k <= length ; k++ ){                var option = new Option( k , k );                $('date').add(option);            }        }        // 封装获取id的简化函数        function $(id) {            return document.getElementById(id);        }    </script></head><body>    <select id="year" onchange="doChange()"></select>    <select id="month" onchange="doChange()"></select>    <select id="date"></select></body></html>
阅读全文
0 0