<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .main { width: 800px; margin: 0 auto; } .top { width: 800px; margin: 0 auto; } #nian { width: 100px; height: 30px; display: block; } #yue { width: 100px; height: 30px; display: block; } .float { display: block; width: 50px; } .center { margin: 0 auto; width: 800px; } #tab tr { height: 150px; } #tab tr td, th { width: 150px; } </style> </head> <body> <div class="main"> <div class="top"> <select class="float" onchange="huan()"> </select> <span class="float">年</span> <select class="float" onchange="huan()"> </select> <span class="float">月</span> </div> </div> <div class="center"> <table cellspacing="" cellpadding=""> <tr> <th>周日</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> </tr> </table> </div> <script type="text/javascript"> var tab = document.getElementById("tab"); window.onload = function() { var nian = document.getElementById("nian"); var yue = document.getElementById("yue"); for (var i = 2019; i >= 1970; i--) { var sel = document.createElement("option"); sel.value = i; sel.innerText = i; nian.appendChild(sel); } for (var i = 1; i <= 12; i++) { var sel = document.createElement("option"); sel.value = i; sel.innerText = i; yue.appendChild(sel); } huan(); } function huan() { var week = 0;//周几 var day = 1;//从第一天开始 var days = 30;//这个月一共有几天 // try{ // var ziji=document.getElementsByTagName("td")[0]; // ziji.parentElement.parentElement.removeChild(ziji.parentElement); // }catch(e){ // //TODO handle the exception // } try{ //添加一个add1的类，方便删除 var dataa=document.getElementsByClassName("add1"); for(var i=0;i<dataa.length;){ dataa[0].remove(); } }catch(e){ //TODO handle the exception } var nian = document.getElementById("nian").value; var yue = document.getElementById("yue").value; var date = new Date(nian + "-" + yue + "-1"); //计算这个月有多少天 var data = new Date(nian,yue,0); days=data.getDate(); // alert(days) var newtr = document.createElement("tr"); newtr.classList.add("add1"); for (var i = 0; i < date.getDay(); i++) { if (week == 7) { week = 0; } var newtd = document.createElement("td"); newtr.appendChild(newtd); week++; } if (week <= 6) { for (; week <= 6; week++, day++) { var newtd = document.createElement("td"); newtd.innerText = day; newtd.value = day; newtr.appendChild(newtd); } } tab.appendChild(newtr); week = 0; newtr = document.createElement("tr"); newtr.classList.add("add1"); for (; day <= days; day++, week++) { if (week == 7) { week = 0; tab.appendChild(newtr); newtr = document.createElement("tr"); newtr.classList.add("add1"); } var newtd = document.createElement("td"); newtd.innerText = day; newtd.value = day; newtr.appendChild(newtd); } tab.appendChild(newtr); } </script> </body> </html>