JavaScript 编程题
按照下列要求,用JavaScript写一个年,月,日的联动菜单。
1、默认显示当前日期;
2、选择年才可以选择月,选择月才可以选择日,并且 2 月的天数要正确;
<html> <head> <meta charset="UTF-8"> <title>年月日下拉框联动</title> </head> <body> <form name="dateInfo"> <select name="yearName" οnchange="testYear(this.value)"> <option value="">请选择年</option> </select> <select name="monthName" οnchange="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>