原生JS实现简单的日历功能

前一段时间做的小型项目中有个日历功能,本来想找个JQuery插件,但是感觉样式啊什么的都不太符合,也懒得去改,就自己写了一个,附代码和逻辑

图片:

 

HTML:

一个简单的demo样式左右箭头都是单书名号o(╥﹏╥)o

<-- time_title是日历头部左右箭头和当前月份 -->

<-- time_day是日历表格左右箭头和当前星期 -->

<-- schedule是日历的每一天的表格 -->

<div id="date_time_body">
		<div id="time_title">
			<div id="last">
				<h2>〈 </h2>
			</div>
			<div id="time_num">
				<h1>1</h1>
			</div>
			<div id="next">
				<h2>〉</h2>
			</div>
		</div>
		<div id="time_day">
			<h4 style="color:red;">日</h4>
			<h4>一</h4>
			<h4>二</h4>
			<h4>三</h4>
			<h4>四</h4>
			<h4>五</h4>
			<h4 style="color:red;">六</h4>
		</div>
		<div id="schedule">
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
			<div class="aaa"></div>
		</div>
	</div>

css

<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			width: 100%;
			height: 100vh;
			background-color: #062B3D;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		#date_time_body {
			width: 35%;
			height: 70%;
			background-color: #254C5D;
			border: 1px solid #01DCD8;
		}

		#time_title {
			width: 90%;
			height: 10%;
			display: flex;
			margin: 0 auto;
			justify-content: space-between;
			color: aliceblue;
		}

		#time_day {
			width: 99%;
			height: 10%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			color: aliceblue;
		}

		#schedule {
			width: 100%;
			height: 80%;
			display: flex;
			flex-wrap: wrap;
		}

		.aaa {
			width: 13%;
			height: 15%;
			margin-left: 1.1%;
			text-align: center;
		}

		.aaa div {
			width: 100%;
			height: 100%;
			background-color: aliceblue;
		}

		.aaa div:hover {
			width: 100%;
			height: 100%;
			background-color: #169BD5;
			color: aliceblue;
		}

		.style {
			width: 13%;
			height: 15%;
			margin-left: 1.1%;
			text-align: center;
			background-color: #169BD5 !important;
		}
	</style>

js:

<script>
		let months = document.querySelector('#time_num').querySelector('h1');
		let last = document.querySelector('#last');
		let next = document.querySelector('#next');
		let nian = new Date();
		let yue = nian.getMonth() + 1;
		rili(yue)
		last.addEventListener('click', () => {
			if (months.textContent > 1) {
				yue = parseInt(months.textContent) - 1;
				rili(yue);
			}

		})
		next.addEventListener('click', () => {
			if (months.textContent < 12) {
				yue = parseInt(months.textContent) + 1;
				rili(yue);
			}
		})

		function rili(yue) {
			months.innerHTML = yue;

			let arr31 = [1, 3, 5, 7, 8, 10, 12];
			let brr30 = [4, 6, 9, 11];
			let days;
			// let a = arr31.indexOf(3);
			if (arr31.indexOf(yue) >= 0) {
				days = 31;
			} else if (brr30.indexOf(yue) >= 0) {
				days = 30;
			} else {
				// 判断二月份天数
				if (nian.getFullYear() % 4 == 0 && nian.getFullYear() % 100 != 0 || nian.getFullYear() % 400 == 0) {
					days = 29;
				} else {
					days = 28;
				}
			}
			let week = [0, 1, 2, 3, 4, 5, 6];
			let d = week[new Date(`2022-0${yue}-01`).getDay()];
			let aaa = document.querySelectorAll('.aaa');
			for (let i = 0; i < aaa.length; i++) {
				aaa[i].innerHTML = '';
				aaa[i].id = '';
			}

			for (let i = d; i < days + d; i++) {
				aaa[i].id = 'caozuo';
			}
			let cao = document.querySelectorAll('#caozuo');
			for (let i = 0; i < cao.length; i++) {
				cao[i].innerHTML = `<div id="block${i + 1}">${i + 1}</div>`
			}
			if (yue == (nian.getMonth() + 1)) {
				let blo = document.querySelector(`#block${nian.getDate()}`);
				blo.className = 'style';
			}
		}
	</script>