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>

 

原文地址:https://www.cnblogs.com/wyc1991/p/8784769.html