Javascript年月日联动

代码 
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3  <head>
 4   <title> New Document </title>
 5   <meta name="Generator" content="EditPlus">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9          <script type="text/javascript">
10              function load() {
11                  var i = -1;
12                  //添加年份，从1900年开始
13                  var nowyear = new Date().getFullYear();
14                  var nowmonth = new Date().getMonth()+1;
15                  //var nowday    = new Date().getDate();
16                  for (i = 1900; i <= nowyear; i++) {
17                      addOption(form1.Year, i, i - 0);
18                      //默认选中当前年份
19                      if (i == nowyear) {
20                          form1.Year.options[i-1900].selected = true;
21                      }
22                  }
23                  //添加月份
24                  for (i = 1; i <= 12; i++) {
25                      addOption(form1.Month, i, i);
26                      //默认选中当前月份
27                      if(i == nowmonth){
28                         form1.Month.options[i-1].selected = true;
29                      }
30                  }
31                  //添加日期
32                  for (i = 1; i <= 31; i++) {
33                      addOption(form1.Day, i, i);
34                  }
35              }
36          
37              //设置每个月份的天数
38              function setDays(year, month,day) {
39                  var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
40                  var yea = year.options[year.selectedIndex].text;
41                  var mon = month.options[month.selectedIndex].text;
42                  var num = monthDays[mon - 1];
43                  if (mon == 2 && isLeapYear(yea)) {
44                      num++;
45                  }
46                  for (var i = day.options.length - 1; i >=num; i--) {
47                      day.remove(i);
48                  }
49                  for (var i = 1; i <= num; i++) {
50                      addOption(form1.Day,i,i);
51                  }
52              }
53          
54              //判断是否闰年
55              function isLeapYear(year)
56              {
57                  return (year % 4 == 0 || (year % 100 == 0 && year % 400 == 0));
58              }
59          
60              //向select尾部添加option
61              function addOption(selectbox, text, value) {
62                  var option = document.createElement("option");
63                  option.text = text;
64                  option.value = value;
65                  selectbox.options.add(option);
66              }
67          </script>
68  </head>
69 
70  <body onload="load()">
71      <form id="form1" action="#" name="form1">
72          <select name="year" id="Year" 
73              onchange="setDays(this,form1.Month,form1.Day)"></select>
74          <label>年</label>
75          <select name="month" id="Month" 
76              onchange="setDays(form1.Year,this,form1.Day)" ></select>
77          <label>月</label> 
78          <select name="day" id="Day"></select>
79          <label>日</label>
80  　　  </form>
81  </body>
82 </html>

效果：

 

 

posted @ 2012-11-25 20:29  0DENG0  阅读(179)  评论(0)  编辑  收藏  举报