/*返回选择的年或月*/function seldate(id){var arr=id.querySelectorAll("option");for(var i=0;i<arr.length;i++)
/*返回选择的年或月*/function seldate(id){ var arr=id.querySelectorAll("option"); for(var i=0;i<arr.length;i++){ if(arr[i].selected){ return arr[i].innerHTML; } }}/*返回每个月的天数*/function monthDays(year,mon){ var arr=[]; var flag=year%4==0&&year%100!=0||year%400==0?1:0;//闰年返回1 //console.log(flag); for(var i=1;i<31;i++){ arr.push(i); } if(flag&&mon==2){ arr.pop(); //console.log(arr); }else if(!flag&&mon==2){ arr=arr.slice(0,-2); //console.log(arr); }else if(mon<8&&mon%2!=0||month>=8&&mon%2==0){ arr.push(31); } return arr;}/*判断选中的月份第一天的星期*/function judgeFirDay(year,mon){ mon=mon<10?"0"+mon:mon; console.log(""+year+"-"+mon+"-01"); var datStr=""+year+"-"+mon+"-01"; var date=new Date(datStr); var day=date.getDay(); console.log(day); return day;}function showDate(){ var selYear=seldate(year); var selMon=seldate(month); var totalDays=monthDays(selYear,selMon);//数组 var day=judgeFirDay(selYear,selMon);//星期 for(var i=0;i<day;i++){//根据1号所在星期在数组前面补满空字符串 totalDays.unshift(""); } var ROW=6,COL=7; //console.log(day); if(day==0){//1号星期是周日的情况下在数组前面补满空字符串后在数组后面也要补 for(var j=0;j<COL;j++){ totalDays.unshift(""); } for(var j=0,len=ROW*COL-totalDays.length;j<len;j++){ totalDays.push(""); } }else{//1号如果不是周日则只在数组后面补满空字符串 for(var j=0,len=ROW*COL-totalDays.length;j<len;j++){ totalDays.push(""); } } var arrRow=[]; var tbody=document.body.querySelector("#date>tbody"); tbody.innerHTML=""; var str=""; for(var j=0;j<=(ROW-1)*COL;j+=COL){//截取数组分别拼接html arrRow=totalDays.slice(j,j+COL); console.log(arrRow); str+="<tr><td>"+String(arrRow.join("</td><td>"))+"</td></tr>"; } //console.log(str); tbody.innerHTML=str;}
<!DOCTYPE html><html> <head> <title>日历</title> <meta charset="utf-8" /> <link rel="Stylesheet" href="exercise02_02.css" /> <script type="text/javascript" src="2.js"></script> <!-- <style> #year option[selected]{ background-color:red; } </style> --> </head> <body> 年份： <select id="year" onchange="showDate();"> <option>2010</option> <option>2011</option> <option>2012</option> <option>2013</option> <option>2014</option> <option>2015</option> <option>2016</option> <option>2017</option> </select> <br /> 月份： <select id="month" onchange="showDate();"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> <option>12</option> </select> <table id="date"> <thead> <tr> <td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td> </tr> </thead> <tbody> <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> </tbody> </table> </body></html>
#date { border-collapse:collapse; margin-top:20px;}#date thead td { border:1px solid #000; background-color:#ccc; width:80px; height:30px; text-align:center;}#date tbody td { border:1px solid #666; height:25px; text-align:center;}
