js实现年月日联动功能

js实现年月日联动功能

实现年月日联动最核心的就是要判断每个月份的天数,月份的天数可能是28或29或30或31天。然后通过appendChild()方法和getElementByID()方法实现年月日的联动功能。

具体实现代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>实现年月日联动</title>
</head>

<body>
	<script language="javascript">
		function append(d, v) {
    
    
			var option = document.createElement("option"); 			//创建元素option
			option.value = v; 										//把参数v作为元素的值
			option.innerText = v + "日"; 							//把参数v作为元素的显示内容
			d.appendChild(option); 									//把元素option添加到d的末尾
		}

		function getday() {
    
    
			var y = form1.year.value; 								//获取年份的值
			var m = form1.month.value; 								//获取月份的值
			var d = document.getElementById("day"); 				//获取id=day的节点
			d.innerHTML = ""; 										//清空节点内容
			if (m == 4 || m == 6 || m == 9 || m == 11) {
    
     			//如果月份是4、6、9、11
				for (j = 1; j <= 30; j++) {
    
    
					append(d, j); 									//把1~30循环加到天数当中
				}
			} else if (m == 2) {
    
    									//如果月份是2
				if (y % 4 == 0 || y % 400 == 0 && y % 100 != 0) {
    
    	//如果年份是闰年
					for (j = 1; j <= 29; j++) {
    
    
						append(d, j);								//把1~29循环加到天数当中
					}
				} else {
    
    
					for (j = 1; j <= 28; j++) {
    
    						//如果年份不是闰年则把1~28循环加到天数当中
						append(d, j);
					}
				}


			} else {
    
    												//否则如果月份的值是1、3、5、7、8、10、12
				for (j = 1; j <= 31; j++) {
    
    
					append(d, j);
				}													//把1~31循环加到天数当中
			}
		}
	</script>
	<form id="form1" name="form1" method="post" action="">
		<select name="year" id="year" onchange="getday()">
			<script language="javascript">
				var mydate = new Date();
				for (i = 1970; i <= mydate.getFullYear(); i++) {
    
    
					document.write("<option value='" + i + "' " + (i == 1999 ? "selected" : "") + ">" + i + "年</option>");
				}
			</script>
		</select>
		<select name="month" id="month" onchange="getday()">
			<script language="javascript">
				for (i = 1; i <= 12; i++) {
    
    
					document.write("<option value='" + i + "' " + (i == 1 ? "selected" : "") + ">" + i + "月</option>");
				}
			</script>
		</select>
		<select name="day" id="day">
			<script language="javascript">
				for (i = 1; i <= 31; i++) {
    
    
					document.write("<option value='" + i + "' " + (i == 1 ? "selected" : "") + ">" + i + "日</option>");
				}
			</script>
		</select>
	</form>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/RoddyLD/article/details/115024187