JS 动态日历
业务中有需要批量设置日期的需求，于是动态日历应运而生。。。。
?
看效果图：
?
?
?看代码：
?
<html> <head> <title>动态日历</title><style type="text/css">table{border:1px solid white;}thead tr{background-color:#dfe0e4;}thead tr td{text-align:center;}#calendar tr td{color: #000000;text-decoration: none;background-color:#EFEFEF;text-align:center;}</style> </head> <body>年份：<select id="selYear" name="year" onchange="changeCalendar()"></select>月份：<select id="selMonth" name="month" onchange="changeCalendar()"></select><table width="100%" border="1" cellspacing="0" cellpadding="1"><thead><tr><td>Sunday</td> <td>Monday</td><td>Tuesday</td><td>Wednesday</td> <td>Thursday</td><td>Friday</td><td>Saturday</td></tr></thead><tbody id="calendar"></tbody></table> </body><script type="text/javascript">(function(){var selYear = document.getElementById("selYear");var selMonth = document.getElementById("selMonth");var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;var day = date.getDate();//生成当前年往前推10往后推5的数据for(var i = year - 10,len = year + 5; i < len; i++){var opt = new Option(i + "年", i);if(i == year) opt.selected = true;selYear.options.add(opt);}//生成月份数据for(var j = 1; j <= 12; j++){var m = j < 10 ? "0" + j : j;var opt = new Option(m + "月", m);if(j == month) opt.selected = true;selMonth.options.add(opt);}//显示当前月日历showCalendar(year, month);})();//得到每月的天数function getDaysOfMonth(year, month){if(year && month){if(month == 2){//2月闰年判断if((year % 4 == 0 && year % 100 !=0) || year % 400 == 0){return 29;}return 28;}var bigMonth = [1,3,5,7,8,10,12];var littleMonth = [4,6,9,11];for(var m in bigMonth){if(bigMonth[m] == month)return 31;}for(var m in littleMonth) {if(littleMonth[m] == month)return 30;}}}//根据年月生成日历function showCalendar(year, month){if(year && month){var tbody = document.getElementById("calendar");//生成前删除之前的行for(var i = 0,len =tbody.rows.length;i< len;i++){tbody.deleteRow();}var date = new Date(year, month - 1, 1);//month月的第一天var day = date.getDay();//星期var days = getDaysOfMonth(year, month);//month月的总天数var temp = Math.floor((days + day) / 7);var rows = (days + day) % 7 == 0 ? temp : (temp + 1);//要循环的行数var d = 1;for(var i = 1; i <= rows; i++){//循环行var tr = document.createElement("tr");for(var j = 1; j <= 7; j++){//循环列var td = document.createElement("td");//超过最大天数赋空if(d > days){td.innerHTML = "";tr.appendChild(td);continue;}if(i == 1){//第一行判断month月第一天是星期几，例如星期二前面空两个周日、周一if(j >= day + 1){var html = "<input type='checkbox' name='chkDay'>";td.innerHTML = html + (d < 10 ? "0" + d : d);d++;}else{td.innerHTML = "";}} else {var html = "<input type='checkbox' name='chkDay'>";td.innerHTML = html + (d < 10 ? "0" + d : d);d++;}tr.appendChild(td);}tbody.appendChild(tr);}}}function changeCalendar(){var y = document.getElementById("selYear").value;var m = document.getElementById("selMonth").value;showCalendar(y, m);}</script></html>?