需求说明：
使用 JavaScript 中的 Date 对象，在页面上显示一个万年历。选择不同的年份和月份，在页面中显示当前月的日历
实现思路：
在页面中添加两个 <select> 标签，用来显示年份和月份；同时添加两个 <ul> 标签，一个用来显示星期，另一个用来显示日期
在 JavaScript 脚本中动态添加年份和月份，获取当前日期的年份和月份，显示到 <select> 标签上
根据 <select> 标签上显示的 value 值，获取当前选中年月的第一天是星期几，并绘制空 <li> 标签
获取当前选中的年月一共有多少天，并绘制对应的 <li> 标签
为两个 <select> 标签设置 onchange 事件
实现代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } #calender{ width: 700px; background-color: lightgray; margin: 20px auto; } #month_year{ width: 700px; height: 50px; line-height: 50px; text-align: center; } ul li{ float: left; width: 100px; height: 50px; text-align: center; line-height: 50px; } </style> </head> <body> <div id="calender"> <div id="month_year"> <select id="year"></select>年 <select id="month"></select>月 </div> <ul id="title"> <li>星期天</li> <li>星期一</li> <li>星期二</li> <li>星期三</li> <li>星期四</li> <li>星期五</li> <li>星期六</li> </ul> <ul id="dateul"></ul> </div> <script type="text/javascript"> var yearSelect=document.getElementById("year"); var monthSelect=document.getElementById("month"); var dateul=document.getElementById("dateul"); function init(){ for (var year=1990;year<3000;year++) { createOption(year,year,yearSelect); } for (var month=1;month<13;month++) { createOption(month,month-1,monthSelect); } var now=new Date(); console.log(Date) showSelect(now.getFullYear(),now.getMonth()); showDates(); yearSelect.onchange=function(){ showDates(); } monthSelect.onchange=function(){ showDates(); } } function createOption(text,value,parent){ var option=document.createElement("option"); option.innerHTML=text; option.value=value; parent.appendChild(option); } function showSelect(year,month){ yearSelect.value=year; monthSelect.value=month; } function showDates(){ dateul.innerHTML=""; var year=yearSelect.value; var month=monthSelect.value; for (var i=0;i<getDays(year,month);i++) { createLi("",dateul); } for (var j=1;j<=getDatesOfMonth(year,month);j++) { createLi(j,dateul); } } function getDays(year,month){ var d=new Date(year,month,1); return d.getDay(); } function createLi(text,parent){ var li=document.createElement("li"); li.innerHTML=text; parent.appendChild(li); } function getDatesOfMonth(year,month){ var d=new Date(year,month+1,0); return d.getDate(); } init(); </script> </body> </html>
