document操作例题5-日历下拉列表
八.日历下拉列表
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<select id="nian" onclick="Dian()"></select>年
<select id="yue" onclick="Dian()"></select>月
<select id="ri"></select>日
</body>
<script type="text/javascript">
Nian();
Yue();
Ri();
function Nian()
{
var a=new Date(); //获取当前时间
var b=parseInt(a.getFullYear()); //获取当前年份并取整
var c; //定义变量c
for(var i=b-5;i<b+6;i++) //设定获取的年份范围
{
if(i==b) //当i等于当前年份时设为默认年份
{
c+="<option selected='selected'>"+i+"</option>";
}
else //c+=意为c=c+ 这里用for循环将字符串进行累加，得到范围内所有年份并赋值给c
{
c+="<option>"+i+"</option>";
}
}
document.getElementById("nian").innerHTML=c; //修改下拉内容为c
}
function Yue()
{
var a=new Date();
var b=parseInt(a.getMonth()+1);
var c;
for(var i=1;i<13;i++)
{
if(i==b)
{
c+="<option selected='selected'>"+i+"</option>" ;
}
else
{
c+="<option>"+i+"</option>";
}
}
document.getElementById("yue").innerHTML=c;
}
function Ri()
{
var n=document.getElementById("nian").value; //日期与年月不一样，需要判断条件才能确定每个月有多少天，先设天数为31天，当为闰年且为2月时为29天，其余为28天。
var y=document.getElementById("yue").value; //当为4.6.9.11月时为30天，其余为31天
var ts=31;
var a=new Date();
var b=parseInt(a.getDate());
var c;
if(y==2)
{
if(n%4==0&&n%100!=0||n%400==0)
{
ts=29;
}
else
{
ts=28;
}
}
if(y==4||y==6||y==9||y==11)
{
ts=30;
}
for(var i=1;i<ts+1;i++)
{
if(i==b)
{
c+="<option selected='selected'>"+i+"</option>";
}
else
{
c+="<option>"+i+"</option>";
}
}
document.getElementById("ri").innerHTML=c;
}
function Dian() //日期函数所获得的天数是根据默认年月的，当年月改变时需要一个事件再次调用日期函数.
{
Ri()
}
</script>
</html>
