年、月、日下拉菜单

来源：互联网发布：网络小额度无抵押贷款编辑：程序博客网时间：2024/04/28 07:00
工作之余就学学js,费了好几个工作之余终于写出来了
<!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>  </title><meta name="generator" content="editplus" /><meta name="author" content="" /><meta name="keywords" content="" /><meta name="description" content="" /><style type="text/css">select{ width:100px;}span{ padding:0 10px 0 5px;}</style></head><body><select id="year" name=""></select><span>年</span><select id="month" name=""></select><span>月</span><select id="day" name=""></select><span>日</span><p>[1,3,5,7,8,10,12]共31天</p><p>[44,6,9,11]共30天</p><p>[2]共28天</p><script type="text/javascript">window.onload = function(){var year = $('year');var month = $('month');var day = $('day');getDate(year,1980,(new Date).getFullYear());getDate(month,1,12);getDate(day,1,31);month.onchange = function()//改变月份值的时候{var val = this.value; //获得月份的值var valY = year.value; //获得年的值var run = (valY % 4 == 0 && valY % 100 != 0) || ( valY % 400 == 0)//判断是不是润年removeDate(day)//清空日的值if(val == 2){//如果是2月return run ? getDate(day,1,29): getDate(day,1,28)//在如果是2月的前提下如果是润年则一个月有29年，否则为28天}else if(val == 4 || val == 6 || val == 9 || val == 11){ //如果是一个月30天的月份getDate(day,1,30); //一个月有30天}else{getDate(day,1,31); //则剩下的每个月都为31天}}year.onchange = function()//改变年份值的时候{var val = this.value;//当前年份的值var valM = month.value; //当前月份的值var run = (val % 4 == 0 && val % 100 != 0) || ( val % 400 == 0)//判断是不是润年removeDate(day);//清空日的值if(run && valM == 2){//如果选中的年份是润年并且是2份getDate(day,1,29) //则当月有29天}else if(valM ==2){ //如果选中的年份不是润年但月份是2月getDate(day,1,28)//则当月有28天}else if(valM == 4 || valM == 6 || valM == 9 || valM == 11){ //如果是一个月30天的月份getDate(day,1,30);//一个月有30天}else{getDate(day,1,31);//则剩下的每个月都为31天}}}function $(id){return typeof id === 'string' ? document.getElementById(id) : id;}function getDate(obj,m,n){for( var i = m; i <= n; i++){var option = document.createElement('option'); //创建optionoption.value = i; //设置option的值option.innerHTML = i; //设置option的innerHTML;obj.appendChild(option); //将option添加入对象中}}function removeDate(obj){obj.options.length = 0; //清空对象中的option}</script></body></html>