以下是用HTML+JS针对select标签做的操作。
判断闰年和平年下2月的天数,也判断大也和小月的天数,并动态显示出来。(代码有些地方还不够简洁!)
在做的时候碰到了一个问题,在动态往select标签里添加内容的时候,用document.write添加时可以显示,但用document.getElementById("select标签ID").innerHTML添加时就不行了,原来innerHTML对select标签不起作用。
经过在网上搜索,找到了解决办法。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>日期JS</title>
- <script type="text/javascript">
- var date=new Date();
- //读出所有年份
- var startYear=1970;
- var nowYear=date.getFullYear();
- var yearArr=new Array();
- var arrIndex=0;
- for(var i=startYear;i<=nowYear;i++)
- {
- yearArr[arrIndex]=i;
- arrIndex++;
- }
- //读出所有月份
- var nowMonth=date.getMonth();
- var monthArr=new Array();
- for(var i=1;i<=12;i++)
- {
- monthArr[i-1]=i;
- }
- //读出所有日期
- var nowDate=date.getDate();
- var dateArr=new Array();
- function ArrDates(count)
- {
- dateArr=new Array();
- for(var i=1;i<=count;i++)
- {
- dateArr[i-1]=i;
- }
- }
- //判断闰年
- //value:选中的年
- function ShowDate(value,_classid)
- {
- //判断是不是闰年
- var reg = /^[0-9]*[1-9][0-9]*$/;
- var year=parseInt(value);
- if(reg.test(year))
- {
- if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0)
- {
- if(_classid == "1")
- {
- alert(year+"是闰年");
- }
- return "true";//闰年
- }
- else
- {
- if(_classid == "1")
- {
- alert(year+"不是闰年");
- }
- return "false";//不是闰年
- }
- }
- else
- {
- if(_classid == "1")
- {
- alert("输入不合法,必须是正整数");
- }
- return "error";//输入内容不对
- }
- }
- //显示天数
- //month:选中的月
- //yearBoll:是否为闰年
- function ShowNowDate(month,yearBoll)
- {
- switch(parseInt(month))
- {
- case 1:
- ArrDates(31);
- break;
- case 2:
- if(yearBoll == "true")
- {
- ArrDates(29);
- }
- else if(yearBoll == "false")
- {
- ArrDates(28);
- }
- break;
- case 3:
- ArrDates(31);
- break;
- case 4:
- ArrDates(30);
- break;
- case 5:
- ArrDates(31);
- break;
- case 6:
- ArrDates(30);
- break;
- case 7:
- ArrDates(31);
- break;
- case 8:
- ArrDates(31);
- break;
- case 9:
- ArrDates(30);
- break;
- case 10:
- ArrDates(31);
- break;
- case 11:
- ArrDates(30);
- break;
- case 12:
- ArrDates(31);
- break;
- }
- }
- //通过年、月来正确显示日期总天数
- ///
- //yObj:帮定年的select前台控件
- //ySel:当前显示的年份
- //mObj:帮定月的select前台控件
- //mSel:当前显示的月份
- function OnLoadDate(ySel,mSel)
- {
- if(mSel != "2")
- {
- ShowNowDate(mSel,"");
- }
- else
- {
- ShowNowDate(mSel,ShowDate(ySel));
- }
- var html="";
- var sel2=document.getElementById("lw_select_date");
- for(var i=0;i<dateArr.length;i++)
- {
- if(i==0)
- {
- var options=new Option(i,dateArr[i]);
- sel2.add(options);
- html+="<option value="+ i +" selected>"+ dateArr[i] +"</option>";
- }
- else
- {
- var options=new Option(dateArr[i],i);
- sel2.add(options);
- }
- }
- }
- </script>
- </head>
- <body>
- <input value="" id="lw_date" name="lw_date" />
- <input type="button" value="判断年份是否为闰年"
- onclick="javascript:ShowDate(document.getElementById('lw_date').value,'1');"/>
- <div>
- <select id="lw_select_year"
- onchange="javascript:var month_obj=document.getElementById('lw_select_month');
- OnLoadDate(this.options[this.selectedIndex].text,month_obj.options[month_obj.selectedIndex].text)">
- <script type="text/javascript">
- for(var i=0;i<yearArr.length;i++)
- {
- document.write("<option value="+ i +">"+ yearArr[i] +"</option>");
- }
- </script>
- </select>
- <script type="text/javascript">
- var yearObj=document.getElementById("lw_select_year");
- var yearSel=yearObj.options[yearObj.selectedIndex].text;
- </script>
- <select id="lw_select_month"
- onchange="OnLoadDate(yearObj.options[yearObj.selectedIndex].text,this.options[this.selectedIndex].text)">
- <script type="text/javascript">
- for(var i=0;i<monthArr.length;i++)
- {
- document.write("<option value="+ i +">"+ monthArr[i] +"</option>");
- }
- </script>
- </select>
- <select id="lw_select_date">
- </select>
- <script type="text/javascript">
- var monthObj=document.getElementById("lw_select_month");
- var monthSel=monthObj.options[monthObj.selectedIndex].text;
- if(monthSel != "2")
- {
- ShowNowDate(monthSel,"true");
- }
- else
- {
- ShowNowDate(monthSel,ShowDate(yearSel));
- }
- var html="";
- var sel=document.getElementById("lw_select_date");
- for(var i=0;i<dateArr.length;i++)
- {
- var options=new Option(dateArr[i],i);
- sel.add(options,i+1);
- }
- </script>
- </div>
- </body>
- </html>