首先知道具体要实现的功能

实现选择不同年月，实现日历的效果

一.html代码

<div id="calendar"><div id="top"><!-- onchange事件，当用户改变input属性时，执行一段js代码 --><select id="year" onchange="hqx()"></select><span>年</span><select id="month" onchange="hqx()"></select><span>月</span></div></div><div id="table"><table id="tab" border="0" cellspacing="0" cellpadding=""><tr><th>周日</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th><th>周六</th></tr></table></div>

二.css代码，由于我自己的配色太烂，看着太丑了，我去搜索了配色表，然后配色，看着就比较好看

<style>select {width: 100px;height: 30px;}#calendar{width: 300px;height: 30px;margin: 0 auto;margin-bottom: 5px;}#table{width: 450px;margin: 0 auto;}tr {height: 50px;}th {width: 50px;text-align: center;line-height: 50px;border: 0;}tr>th:nth-child(1){background-color: #e4c2d1;}tr>th:nth-child(2){background-color: #bfa3ce;}tr>th:nth-child(3){background-color: #aca1cc;}tr>th:nth-child(4){background-color: #a17baf;}tr>th:nth-child(5){background-color: #894b94;}tr>th:nth-child(6){background-color: #e96da9;}tr>th:nth-child(7){background-color: #d93343;}tr>td{text-align: center;line-height: 50px;border: 0;}td:nth-child(1){background-color: #027766;}td:nth-child(2){background-color: #18907d;}td:nth-child(3){background-color: #178b9a;}td:nth-child(4){background-color: #77b2b8;}td:nth-child(5){background-color: #77b3b4;}td:nth-child(6){background-color: #c6e4ee;}td:nth-child(7){background-color: #d3e0d7;}</style>

三.具体功能实现

1.绑定年月日，遍历年份，并添加下拉表单

//绑定事件var tab = document.getElementById('tab') //表格var year = document.getElementById('year') //年份var month = document.getElementById('month') //月份window.onload = function () {//遍历年，添加option元素并赋值for (var i = 1970; i <= 2050; i++) {var sel = document.createElement('option'); //创建一个新的option元素sel.value = i; //添加年份sel.innerHTML = i; //显示在网页year.appendChild(sel); //添加新的sel节点//设置默认年份if(i==2021){sel.selected=true;}}//遍历月for (var i = 1; i <= 12; i++) {var sel = document.createElement('option'); //创建一个新的option元素sel.value = i; //添加年份sel.innerHTML = i; //显示在网页month.appendChild(sel); //添加新的sel节点// 设置默认月份if(i==8){sel.selected=true;}}hqx()}

2.1封装一个函数实现点击具体的年月，显示日历，在封装中我遇到了许多的问题其中最令我头疼的是我每点击一次不同的年月，都会生成一个新的日历，然后我不知道这个问题怎么处理，后来我知道了一个新的方法，try{ }catch（e）{ }方法 异常捕获，在js代码出现错误的时候，可以吞掉错误，不执行它。下面就是这个方法在这里的使用

//try{}catch(e){}方法，当try里面的代码有错误，就不执行这些代码，执行catch里面的代码try {var dataa = document.getElementsByClassName("add1");//删除索引为0的add1 ，后面的补齐，避免重复输出的错误for (var i = 0; i < dataa.length;) { dataa[0].remove(); }} catch (e) {}

2.2具体实现代码

声明变量，生成新的节点，给节点添加类名

var week = 0; //周几var day = 1; //第一天var days = 30; //最后一天//注意年月后面都要加value，不然显示Invalid Date无效日期var date = new Date(year.value + '-' + month.value + '-1') //拼接时间var data = new Date(year.value, month.value, 0);//console.log(data);days = data.getDate(); //获得月份天数// console.log(days);//console.log( date.getDay());var newtr = document.createElement('tr'); //添加trnewtr.classList.add('add1'); //添加新的类名

2.3循环判定，第一天是周几，前面的输出空格，后面的输出日期一次加一

// 这个循环时添加空的td，先date.getDay()输出当前月份第一天是周几，然后在前面添加空格for (let i = 0; i < date.getDay(); i++) { //date.getDay()返回当前月份的星期几if (week == 7) { //判断是不是周天week = 0;}var newtd = document.createElement('td'); //定义newtd为创建新的td元素newtr.appendChild(newtd); //在tr下面添加空的tdweek++; //周++}//得到月份的第一天的周几，再来循环输出周1.2.3.....if (week <= 6) {for (; week <= 6; week++, day++) {var newtd = document.createElement("td"); //定义newtd为创建新的td元素newtd.innerText = day; //在页面输出天newtd.value = day; //给td的value赋值newtr.appendChild(newtd); //在tr下面添加td}}

2.4添加新的表格行，循环输出到月份的最后一天。这里我因为我添加了每一个格子的背景的颜色，所以最后一行还得补齐最后一个格子，不然影响美观

tab.appendChild(newtr); //给表格添加新的表格行week = 0; //从第一格开始newtr = document.createElement("tr"); //给表格添加新的表格行newtr.classList.add("add1"); //给表格行添加一个类名add1for (; 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; //给td的value赋值newtr.appendChild(newtd); //添加td}tab.appendChild(newtr); //添加最后一行//补齐后面的空格子if (week <= 6) {for (; week <= 6; week++, day++) {var newtd = document.createElement("td"); //定义newtd为创建新的td元素newtr.appendChild(newtd); //在tr下面添加td}}