JS实现时间选择器

时间:2024-03-06 19:07:18

源代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="xsj">
			<select id="year" onclick="Reset()"></select>年
		
			<select id="month" onclick="Reset()"></select>月
			
			<select id="date"></select>日
			
		</div>
	</body>
	<script type="text/javascript">
		 //创建时间对象
		 var d = new Date(); 
		 //获取当前年份
		 var year = parseInt(d.getFullYear());
		 
		 //获取当前月份
		 var month = parseInt(d.getMonth() + 1);
		 
		 //获取当前日期
		 var date = parseInt(d.getDate());
		 
		 //调用添加年份的函数
		 fillYear();
		 //调用添加月份的函数
		 fillMonth();
		 //调用添加天数的函数
		 fillDate();
		 
		 
		 
		 
		 //添加年份的函数 
		 function fillYear () {
		 	
		 	//定义一个空变量来接收下拉列表中该填入的值
		 	var str = "";
		 	//遍历当前年份的前后五年
		 	for (var i=year-5; i<year+6; i++) {
		 		//设置当前年份为默认选中
		 		if (i == year) {
		 			str = str + "<option selected = \'selected\'>"+i+"</option>"
		 			
		 		} else{
		 			str = str + "<option>"+i+"</option>"
		 		}
		 	}
		 	//将年份添加至下拉列表
		 	document.getElementById("year").innerHTML = str;
		 }
		 
		 
		 //添加月份的函数
		 function fillMonth () {
		 	
		 	
		 	var str = "";
		 	
		 	//遍历月份
		 	for (var m = 1; m < 13; m++) {
		 		//设置当前月份为默认选中
		 		if (m == month) {
		 			//下拉列表的默认选项
		 			str = str + "<option selected = \'selected\'>"+m+"</option>"
		 			
		 		} else{
		 			//下拉列表的非默认选项
		 			str = str + "<option>"+m+"</option>"
		 		}
		 		
		 	}
		 	//将月份填充至下拉列表
		 	document.getElementById("month").innerHTML = str;
		 	
		 }
		 
		 
		 
		 //添加天数的函数
		 function fillDate () {
		 	
		 	//定义初始天数为31天
		 	var days = 31;
		 	//获取选中的年份
		 	var syear = document.getElementById("year").value;
		 	//获取选中的月份
		 	var smonth = document.getElementById("month").value;
		 	
		 	//判断每个月份的天数
		 	if (smonth==4 || smonth==6 || smonth==9 || smonth==11) {
		 		days = 30;
		 	// 	
		 	} else if (smonth == 2){
		 		if (syear%4==0 && syear%100!=0 || syear%400 ==0) {
		 			days=29;
		 		} else{
		 			days = 28;
		 		}
		 	}else{
		 		days = 31;
		 	}
		 	
		 	//
		 	var str = "";
		 	//用循环向下拉列表添加天数
		 	for (var r = 1; r<days+1; r++) {
		 		//设置当前日期为默认选中
		 		if (r == date) {
		 			
		 			str = str + "<option selected = \'selected\'>"+r+"</option>"
		 		} else{
		 			str = str + "<option>"+r+"</option>"
		 		}
		 		
		 	}
		 	//添加天数
		 	document.getElementById("date").innerHTML = str;
	
		 }
		 
		 
		 //为年份及月份添加点击事件  用以重置每月天数
		 function Reset () {
		 	fillDate();
		 }
	
	</script>
</html>

  效果如下: