JavaScript 编程题
按照下列要求，用JavaScript写一个年，月，日的联动菜单。
1、默认显示当前日期；
2、选择年才可以选择月，选择月才可以选择日，并且 2 月的天数要正确；
<html>
<head>
<meta charset="UTF-8">
<title>年月日下拉框联动</title>
</head>
<body>
<form name="dateInfo">
<select name="yearName" onchange="testYear(this.value)">
<option value="">请选择年</option>
</select>
<select name="monthName" onchange="testMonth(this.value)">
<option value="">请选择月</option>
</select>
<select name="dayName">
<option value="">请选择日</option>
</select>
</form>
<script>
// 定义各个月份天数
var monthTemp = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
/**
* 页面完成加载完成后执行
*/
window.onload = function() {
// 获取当前年份
var yearValue = new Date().getFullYear();
// 获取当前月份
var monthValue = new Date().getMonth() + 1;
// 以今年为准，前30年，后30年
for(var i = (yearValue - 30); i <= (yearValue + 30); i++) {
document.dateInfo.yearName.options.add(new Option(" " + i + " 年", i));
}
// 月份的下拉框
for(var i = 1; i <= 12; i++) {
document.dateInfo.monthName.options.add(new Option(" " + i + " 月", i));
}
// 设定年份
document.dateInfo.yearName.value = yearValue;
// 设定月份
document.dateInfo.monthName.value = monthValue;
// 获取当前月份的天数
var dayValue = monthTemp[monthValue - 1];
// 初始化日选项框
initDay(dayValue, monthValue, yearValue);
// 设置当前日
document.dateInfo.dayName.value = new Date().getDate();
}
// 年发生变化时日期发生变化
function testYear(yearValue) {
// 获取当前月份
var monthValue = document.dateInfo.monthName.value;
// 判断月份是否被选中，若未选中，则重置日选项框
if(monthValue == "") {
optionsClear(document.dateInfo.dayName);
return;
}
// 根据月份获取天数
var dayValue = monthTemp[monthValue - 1];
// 初始化日选项框
initDay(dayValue, monthValue, yearValue);
}
// 月发生变化时日期联动
function testMonth(monthValue) {
// 获取当前年份
var yearValue = document.dateInfo.yearName.value;
// 判断年份是否被选中，若未选中，则重置日选项框
if(yearValue == "") {
optionsClear(document.dateInfo.dayName);
return;
}
// 根据月份获取天数
var dayValue = monthTemp[monthValue - 1];
// 初始化日选项框
initDay(dayValue, monthValue, yearValue);
}
// 初始化日选项框
function initDay(dayValue, monthValue, yearValue) {
// 判断是否是2月份，并且判断是否为闰年
if(monthValue == 2 && isLeapYear(yearValue)) {
dayValue++;
}
// 获取当前日下拉框
var e = document.dateInfo.dayName;
// 重置下拉框
optionsClear(e);
// 填充日下拉框
for(var i = 1; i <= dayValue; i++) {
e.options.add(new Option(" " + i + " 日", i));
}
}
// 判断是否闰平年
function isLeapYear(year) {
// 闰年的定义是(可被4整除)且((不可被100整除)或(可被400整除))的年份
return(year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
}
// 重置下拉框
function optionsClear(e) {
e.options.length = 1;
}
</script>
</body>
</html>