万年历的实现

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

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

一.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'); //添加tr
			newtr.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下面添加空的td
				week++; //周++
			}
			//得到月份的第一天的周几，再来循环输出周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"); //给表格行添加一个类名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; //给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
				}
			}