前端知识笔记（十五）———JS实现日历功能

瑞崽崽崽

已于 2023-12-02 14:03:59 修改

阅读量591

点赞数 7

文章标签：前端笔记 javascript

于 2023-12-01 13:36:53 首次发布

本文链接：https://blog.csdn.net/lrx276/article/details/134732666

版权

无需理解，“开袋即食”，打开就是一个日历的样式以及功能

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Js日历</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.date {
				width: 59vh;
				height: 59vh;
				margin: 0 auto;
				background-color: rgb(37, 76, 93);
				border: 1px solid rgb(5, 216, 226);
			}
			.evrday,
			.blockday {
				width: 13%;
				height: 7.5vh;
				margin: 0.1vh;
				background-color: white;
			}
			
			.evrday p,.evrday span{
				font-size: 14px;
				line-height: 1.2;
			}
			
			.evrday:hover {
				background-color: rgb(22, 155, 213);
				color: white !important;
			}
			
			.blockday {
				opacity: 0;
			}
			
			.month {
				width: 100%;
				height: 3vh;
				padding: 0 1vh;
				display: flex;
				align-items: center;
			}
			
			.week {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				color: white;
			}
			
			.weekday {
				width: 14%;
				height: 3vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.weekday p{
				font-size: 14px;
			}
			
			#calendar {
				width: 100%;
				height: 59vh;
				margin: auto;
				text-align: center;
			}
			
			#month {
				width: 100%;
				float: left;
				color: white;
				font-size: 16px;
				font-weight: bold;
			}
			
			#day {
				width: 100%;
				height: 53vh;
				padding: 1vh;
				justify-content: space-around;
				display: flex;
				flex-wrap: wrap;
			}
		</style>
	</head>
	<script src="js/jquery-3.7.0.js"></script>
	<body>
		<div class="date">
			<div id="calendar">
				<div class="month">
					<div onclick="previous()">
						<svg t="1693903662097" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="4363" width="3vh" height="3vh">
							<path d="M319.64 512.016l336.016-336.008 45.248 45.248L364.896 557.28z" p-id="4364"
								fill="#ffffff">
							</path>
							<path d="M365.216 466.464l339.976 339.968-45.256 45.256-339.976-339.976z"
								p-id="4365" fill="#ffffff">
							</path>
						</svg>
					</div>
					<div id="month"></div>
					<div onclick="next()">
						<svg t="1693914600013" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="4143" width="3vh" height="3vh">
							<path d="M658.56 557.392L322.536 221.384l45.248-45.256 336.016 336.008z" p-id="4144"
								fill="#ffffff">
							</path>
							<path d="M704.088 512.2L364.12 852.16l-45.256-45.248 339.976-339.976z" p-id="4145"
								fill="#ffffff">
							</path>
						</svg>
					</div>
				</div>
				<div class="week">
					<div class="weekday" style="color: red;">
						<p>日</p>
					</div>
					<div class="weekday">
						<p>一</p>
					</div>
					<div class="weekday">
						<p>二</p>
					</div>
					<div class="weekday">
						<p>三</p>
					</div>
					<div class="weekday">
						<p>四</p>
					</div>
					<div class="weekday">
						<p>五</p>
					</div>
					<div class="weekday" style="color: red;">
						<p>六</p>
					</div>
				</div>
			
				<div id="day" style="color:#000"></div>
			</div>
		</div>
		
		<script>
			let today = new Date(); //获取当前时间
			let year = today.getFullYear(); //获取当前的年份
			let month = today.getMonth() + 1; //获取当前月
			let day = today.getDate(); //获取当前日
			let allday = 0;
						
						
			showday()
						
			function showmonth() {
				let year_month = year + '年' + month + '月';
				$('#month').html(year_month); //显示当前的年月日
			}
						
			function count() {
				if (month != 2) {
					if (month == 4 || month == 6 || month == 9 || month == 11) //判断是否是相同天数的几个月，二月除外
						allday = 30;
					else
						allday = 31;
				} else {
					if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) //判断是否是闰年，进行相应的改变
						allday = 29;
					else
						allday = 28;
				}
			}
			//显示相应月份的天数
			function showday() {
				showmonth()
				count();
				let fistdate = new Date(year, month - 1, 1);
				let xingqi = fistdate.getDay();
				let str = '';
				for (let i = 0; i < xingqi; i++) //循环输出天数
				{
					str += `<div class="blockday"></div>`
				}
						
				for (let j = 1; j <= allday; j++) {
					if (year === today.getFullYear() && month === today.getMonth() + 1 && j === today.getDate()) {
						str +=
							`<div class="evrday" style="background-color: rgb(221,153,31); color: white">
								<span>${j}</span>
							</div>`
						continue;
					}
					if ((j + xingqi - 1) % 7 === 0 || (j + xingqi) % 7 === 0) {
						str +=
							`<div class="evrday" style="color: red;">
								<span>${j}</span>
							</div>`
						continue;
					}
						
					str +=
						`<div class="evrday">
							<span>${j}</span>
						</div>`
				}
						
				for (let k = 0; k < 42 - allday - xingqi; k++) {
					str += `<div class="blockday"></div>`
				}
				$('#day').html(str);
						
			}
			//点击下个月
			function next() {
				if (month < 12) {
					month = month + 1;
				} else {
					month = 1;
					year = year + 1;
				}
				showday()
			}
			//点击上个月
			function previous() {
				if (month > 1) {
					month = month - 1;
				} else {
					month = 12;
					year = year - 1;
				}
				showday()
			}
		</script>
    </body>
</html>