码迷,mamicode.com
首页 > 编程语言 > 详细

关于时间的操作(JavaScript版)——年月日三级联动(默认显示系统时间)

时间:2014-06-28 07:04:42      阅读:325      评论:0      收藏:0      [点我收藏+]

标签:年月日三级联动 默认显示系统时间

        这个功能是大学时自己使用纯JavaScript写的,没有借助Jquery,呵呵呵,看起来有点繁琐,可是在当时依稀的记得功能实现后自己好好的高兴一把了呢bubuko.com,布布扣,从现在来看那时候的自己是多么的幼稚、多么的无知:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>年月日三级联动(默认显示系统时间)</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<script type="text/javascript">
			function removeChilds(id){
				var childs = document.getElementById(id).childNodes;//这一行代码和紧跟的下面的for循环用于清除原来日的下拉列表的select中的对节点
				for(var i=childs.length-1;i>=0;i--) {
					document.getElementById(id).removeChild(childs[i]);      
				}
			}
			function setDay(){
				var yearToDate=document.getElementById("year").value;
				var monthToDate=document.getElementById("month").value;
				//alert(yearToDate+":"+monthToDate);
				var days=new Array(28,29,30,31);
				var nowDate=new Date();
				if(monthToDate==1||monthToDate==3||monthToDate==5||monthToDate==7||monthToDate==8||monthToDate==10||monthToDate==12){
					removeChilds("day");
					for( i=1; i<=days[3]; i++ ){
						if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//如果是当前系统时间则设置默认的日
							var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");
							var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
							document.getElementById("day").appendChild(newOption);
						}else{
							var newOption = document.createElement("option");newOption.setAttribute("value",i);
							var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
							document.getElementById("day").appendChild(newOption);
						}
					}
				}
				if(monthToDate==4||monthToDate==6||monthToDate==9||monthToDate==11){
					removeChilds("day");
					for( i=1; i<=days[2]; i++ ){
						if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//如果是当前系统时间则设置默认的日
							var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");
							var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
							document.getElementById("day").appendChild(newOption);
						}else{
							var newOption = document.createElement("option");newOption.setAttribute("value",i);
							var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
							document.getElementById("day").appendChild(newOption);
						}
					}
				}
				if(monthToDate==2){
					removeChilds("day");
					if(yearToDate%400==0||yearToDate%100!=0&&yearToDate%4==0){//闰年
						for( i=1; i<=days[1]; i++ ){
							if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//如果是当前系统时间则设置默认的日
								var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");
								var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
								document.getElementById("day").appendChild(newOption);
							}else{
								var newOption = document.createElement("option");newOption.setAttribute("value",i);
								var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
								document.getElementById("day").appendChild(newOption);
							}
						}
					}
					else{
						for( i=1; i<=days[0]; i++ ){
							if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//如果是当前系统时间则设置默认的日
								var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");
								var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
								document.getElementById("day").appendChild(newOption);
							}else{
								var newOption = document.createElement("option");newOption.setAttribute("value",i);
								var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);
								document.getElementById("day").appendChild(newOption);
							}
						}
					}
				}
			}
			function getMonth(){
				var m;
				for(m=1;m<=12;m++) {
					if((new Date().getMonth()+1)==m){
						document.write("<option value="+m+" selected=\"selected\">"+m+"</option>");
					}else{
						document.write("<option value="+m+">"+m+"</option>");
					}
				}
			}
			function getYear(){
				var y;
				var date=new Date();
				var fullYear=date.getFullYear();
				for(y=fullYear-60;y<=fullYear;y++){
					if(y==fullYear){
						document.write("<option value="+y+" selected=\"selected\">"+y+"</option>");
					}else{
						document.write("<option value="+y+" >"+y+"</option>");
					}
				} 
			}
		</script>
	</head>
	<body>
		<select name="year" id="year" onChange="setDay();"><script type="text/javascript">getYear();</script></select>年
		<select name="month" id="month" onChange="setDay()"><script type="text/javascript">getMonth();</script></select>月
		<select name="day" id="day"><script type="text/javascript">setDay();<!--起到初始化日的作用。--></script></select>日
	</body>
</html>

关于时间的操作(JavaScript版)——年月日三级联动(默认显示系统时间),布布扣,bubuko.com

关于时间的操作(JavaScript版)——年月日三级联动(默认显示系统时间)

标签:年月日三级联动 默认显示系统时间

原文地址:http://blog.csdn.net/gaohuanjie/article/details/35263317

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!