年、月、日下拉菜单

最新推荐文章于 2021-06-03 00:41:45 发布

Jxchen

最新推荐文章于 2021-06-03 00:41:45 发布

阅读量578

点赞数

分类专栏： javascript 文章标签： function generator 工作 string date

本文链接：https://blog.csdn.net/jacky_Jxchen/article/details/7360857

版权

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

工作之余就学学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'); //创建option

			option.value = i; //设置option的值

			option.innerHTML = i; //设置option的innerHTML;

			obj.appendChild(option); //将option添加入对象中
		}
	}
	function removeDate(obj)
	{
		obj.options.length = 0; //清空对象中的option
	}
</script>
</body>
</html>