纯JS实现日程安排表

四时之雨

于 2023-10-27 20:12:58 发布

阅读量546

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_68695044/article/details/134083351

版权

html和css部分

<!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>
    </body>
</html>

JS部分

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()
}

成品