级联日期的练习题 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>yidongguanggao</title>
    <script type="text/javascript">
         onload = function(){
            // 一，获取3个Select对象
            var yearSelect = document.getElementById("yearSelect");
            var monthSelect = document.getElementById("monthSelect");
            var dateSelect = document.getElementById("dateSelect");

            // 二，循环12次, 创建12个option, 添加到monthSelect
            for(var x = 1; x <= 12; x++){
               var option = document.createElement("option");    // 创建option元素
               option.value = x;
               option.innerHTML = x;
               monthSelect.appendChild(option);               // 添加到monthSelect中
            }

            // 三，从当前年份开始循环150次, 每次创建一个option, 添加到yearSelect
            var date = new Date();
            for(var x = date.getFullYear(); x >= date.getFullYear() - 150; x--) {
               var option = document.createElement("option");
               option.value = x;
               option.innerHTML = x;
               yearSelect.appendChild(option);
            }

            // 四，当年份和月份改变的时候, 都需要生成日期
            yearSelect.onchange = generateDate;
            monthSelect.onchange = generateDate;

            function generateDate(){
               // 删除原有的option
               var optionArr = dateSelect.options;
               for(var x = 1; x < optionArr.length; x++)
                  dateSelect.removeChild(optionArr[x--]);

               // 获取选中的年份和月份
               var year = yearSelect.value;
               var month = monthSelect.value;

               // 如果年没选或者月没选, 不生成日期
               if(year == "" || month == "")
                  return;

               // 根绝年份和月份判断当前月有多少天
               var days = 0;
               if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12)
                  days = 31;
               else if (month == 2)
                  days = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0 ? 29 : 28;
               else
                  days = 30;

               // 生成option, 添加到dateSelect
               for(var x = 1; x <= days; x++) {
                  var option = document.createElement("option");
                  option.value = x;
                  option.innerHTML = x;
                  dateSelect.appendChild(option);
               }
            }
         }
      </script>
</head>
<body><div>
    <select id="yearSelect"><option value="">-请选择年份-</option></select>
    <select id="monthSelect"><option value="">-请选择月份-</option></select>
    <select id="dateSelect"><option value="">-请选择日期-</option></select>
</div>

</body>
</html>
posted @ 2018-07-21 20:57  年轻人——001  阅读(184)  评论(0)  编辑  收藏  举报