<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <style> html,body{background:#000;font-size:12px;text-align:left;} *{margin:0px;padding:0px} #selectDay{width:490px;margin:0px auto;position:relative;} #slelectyear{float:left;font-size:24px;color:#fff;display:inline;clear:both;width:100%;cursor:pointer} #slelectmonth{float:right;font-size:40px;color:#fff;width:40px;display:inline;clear:both;cursor:pointer;text-align:center;} select{border:none;background:#000;color:#fff;font-size:20px;display:none;position:absolute;cursor:pointer} #year{left:0px;top:2px;} #month{right:-30px;top:30px;font-size:36px;} #selectDay table{border-top:1px solid #fff;color:#fff;border-left:1px solid #fff;width:100%} #selectDay table th,#selectDay table td{border-bottom:1px solid #fff;border-right:1px solid #fff;text-indent:10px;padding- top:40px;padding-bottom:10px;font-weight:normal;} </style> <body> <div id="selectDay"> <div id="slelectyear"> </div> <div id="slelectmonth"> </div> <table border="0" cellspacing="0" cellpadding="0" style="float:left;" id="tabDay"> <tr> <th valign="bottom">周日</th><th >周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th> </tr> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> </table> <select id="year"> </select> <select id="month" > </select> </div> <script type="text/javascript"> var slelectyear = document.getElementById("slelectyear"); var slelectmonth = document.getElementById('slelectmonth'); var year = document.getElementById("year"); var month = document.getElementById("month"); var tabDay = document.getElementById("tabDay").getElementsByTagName("td"); var maxMonth = [1,3,5,7,8,10,12]; var twoMonth ; var week; var minMonth = [4,6,9,11]; var MonthOfDay; var Days; var selectDate={ setting:{ yearStart:1950, yearEnd:2050 }, nowDate:{ nowYear:function(){ return new Date().getFullYear() }, nowMonth:function(){ return new Date().getMonth()+1 }, nowDay:function(){ return new Date().getDay() } }, init:function(){ slelectyear.innerHTML = selectDate.nowDate.nowYear(); slelectmonth.innerHTML = selectDate.nowDate.nowMonth()+"月"; yearAll = parseInt(selectDate.setting.yearEnd - selectDate.setting.yearStart); var yearBegin = parseInt(selectDate.setting.yearStart); //生成年选项菜单 for(var i=0;i<yearAll+1;i++){ year.options.add(new Option(yearBegin,yearBegin)); (function(x){ if(year.options[x].text == parseInt(selectDate.nowDate.nowYear())){ year.options[x].selected = true; }; })(i); yearBegin++; }; //生成月选项菜单 for(var i=0;i<12;i++){ month.options.add(new Option(i+1,i+1)); (function(x){ if(month.options[x].text == parseInt(selectDate.nowDate.nowMonth())){ month.options[x].selected = true; }; })(i); }; }, MonthDay:function(){ //判断2月 if(parseInt(year.options[year.selectedIndex].text)%4!=0){ twoMonth = 28; }else{ twoMonth = 29; }; //判断大月小月 for(var i=0;i<7;i++){ if(parseInt(month.options[month.selectedIndex].text) == maxMonth[i]){ MonthOfDay = 31 } if(parseInt(month.options[month.selectedIndex].text) == minMonth[i]){ MonthOfDay = 30 } } if(parseInt(month.options[month.selectedIndex].text)==2){ Days = parseInt(twoMonth); }else{ Days = parseInt(MonthOfDay); }; }, weekDay:function(){ var d = new Date(); d.setFullYear(parseInt(year.options[year.selectedIndex].text),parseInt(month.options[month.selectedIndex].text)-1,1) var day =1; for(var i=0;i<Days;i++){ tabDay[i+parseInt(d.getDay())].innerHTML = day day++; }; }, changeDay:function(){ var d = new Date(); d.setFullYear(parseInt(year.options[year.selectedIndex].text),parseInt(month.options[month.selectedIndex].text)-1,1) var day =1; for(var i=0;i<tabDay.length;i++){ tabDay[i].innerHTML=""; }; for(var i=0;i<Days;i++){ tabDay[i+parseInt(d.getDay())].innerHTML = day day++; }; }, set:function(){ selectDate.init(); selectDate.MonthDay(); selectDate.weekDay(); month.onchange = function(){ selectDate.MonthDay(); slelectmonth.innerHTML = month.options[month.selectedIndex].text+"月"; selectDate.changeDay(); }; year.onchange = function(){ slelectyear.innerHTML = year.options[year.selectedIndex].text; selectDate.MonthDay(); selectDate.changeDay(); }; } }; selectDate.set(); var display = function(){ slelectyear.onmouseover = function(){ year.style.display = "block"; }; year.onblur = function(){ year.style.display = "none"; } slelectmonth.onmouseover = function(){ month.style.display = "block"; }; month.onblur = function(){ month.style.display = "none"; } }; display() </script> </body> </html>