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>