JS随手小日历

fastrack_0706

于 2021-05-20 10:35:26 发布

阅读量83

点赞数

分类专栏： web前端文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/fastrack_15233866884/article/details/117066017

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.calendar-wrapper {
				width: 500px;
				height: 550px;
				background-color: antiquewhite;
				margin: 100px auto;
			}

			.calendar-header {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 50px;
				box-sizing: border-box;
				padding: 0 10px;
			}

			.actions {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				line-height: 50px;
			}

			.actions .title {
				width: 124px;
				text-align: center;
			}

			.actions .btn {
				background-color: rgb(0, 51, 153);
				color: rgb(255, 255, 255);
				padding: 0 20px;
				cursor: pointer;
				user-select: none;
			}

			.calendar-header span {
				line-height: 50px;
				font-size: 18px;
			}

			.calendar-content {
				width: 100%;
				height: 480px;
			}

			.calendar-content span {
				float: left;
				width: 14.28%;
				height: 75px;
				line-height: 75px;
				text-align: center;
			}

			.calendar-content span.active {
				color: red;
				box-sizing: border-box;
				border: 1px solid red;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div class="calendar-wrapper">
			<div class="actions">
				<div class="btn prev-year">上一年</div>
				<div class="btn prev">上一月</div>
				<div class="title">当前日期</div>
				<div class="btn next">下一月</div>
				<div class="btn next-year">下一年</div>
			</div>
			<div class="calendar-header">
				<span>周一</span>
				<span>周二</span>
				<span>周三</span>
				<span>周四</span>
				<span>周五</span>
				<span>周六</span>
				<span>周日</span>
			</div>
			<div class="calendar-content">
			</div>
		</div>
		<script type="text/javascript">
			/* 
			<div class="calendar-wrapper">
				<div class="actions">
					<div class="btn prev-year">上一年</div>
					<div class="btn prev">上一月</div>
					<div class="title">当前日期</div>
					<div class="btn next">下一月</div>
					<div class="btn next-year">下一年</div>
				</div>
				<div class="calendar-header">
					<span>周一</span>
					<span>周二</span>
					<span>周三</span>
					<span>周四</span>
					<span>周五</span>
					<span>周六</span>
					<span>周日</span>
				</div>
				<div class="calendar-content">
				</div>
			</div> 
			 */
			;
			(function() {
				var oCalendarHeader = document.getElementsByClassName('calendar-header')[0],
					oCalendarContent = document.getElementsByClassName('calendar-content')[0],
					oTitlte = document.getElementsByClassName('title')[0],
					oPrev = document.getElementsByClassName('prev')[0],
					oNext = document.getElementsByClassName('next')[0],
					oPrevYear = document.getElementsByClassName('prev-year')[0],
					oNextYear = document.getElementsByClassName('next-year')[0],
					yearG = 0,
					monthG = 0;

				/**
				 * 初始化函数
				 */
				function init() {
					render();
					bindEvent();
				}

				
				function bindEvent() {
					oPrev.addEventListener('click', function() {
						updateRender('prev')
					}, false);

					oNext.addEventListener('click', function() {
						updateRender('next')
					}, false);

					oPrevYear.addEventListener('click', function() {
						updateRender('prev_year')
					}, false);

					oNextYear.addEventListener('click', function() {
						updateRender('next_year')
					}, false);
				}

				
				function render() {
					renderElement()
				}


				function updateRender(tag) {
					oCalendarContent.innerHTML = '';
					switch (tag) {
						case 'prev':
							monthG -= 1;
							if (monthG == 0) {
								monthG = 12;
								yearG -= 1;
							}
							renderElement(yearG, monthG)
							break;
						case 'next':
							monthG += 1;
							if (monthG == 13) {
								monthG = 1;
								yearG += 1;
							}
							renderElement(yearG, monthG)
							break;
						case 'prev_year':
							yearG -= 1;
							renderElement(yearG, monthG)
							break;
						case 'next_year':
							yearG += 1;
							renderElement(yearG, monthG)
							break;
					}
				}

				
				function renderElement(year, month) {
					var year = year || new Date().getFullYear(),
						month = month || new Date().getMonth() + 1;
					var dateObj = getDateObject({
							year,
							month
						}),
						days = dateObj.days,
						currentMonthOneDayisWeek = dateObj.week,
						currentDay = dateObj.currentDay;
					oTitlte.innerHTML = `${year}年${month}月${currentDay}日`;
					yearG = year;
					monthG = month;
					for (var i = 1; i <= 42; i++) {
						if (i == (days + currentMonthOneDayisWeek)) {
							break;
						}
						var oSpan = document.createElement('span');
						if (currentMonthOneDayisWeek == 0) {
							currentMonthOneDayisWeek = 7
						}
						if (i === currentMonthOneDayisWeek) {
							oSpan.innerHTML = i - currentMonthOneDayisWeek + 1;
						} else {
							if (i == (currentDay + currentMonthOneDayisWeek - 1)) {
								oSpan.className = 'active';
							}

							if (i > currentMonthOneDayisWeek) {
								oSpan.innerHTML = i - currentMonthOneDayisWeek + 1;
							}
						}
						oCalendarContent.appendChild(oSpan)
					}
				}

				/**
				 * 获取需要的时间
				 * @param {Object} options
				 */
				function getDateObject(options) {
					var d = new Date(),
						year = options && options.year || d.getFullYear(),
						month = options && options.month || d.getMonth() + 1,
						days = new Date(year, month, 0).getDate(), //当前月份一共多少天 给个数组也行哈 主要看看是不是闰年
						week = new Date(year, month - 1, 1).getDay(), //获取当前月第一天是周几
						currentDay = d.getDate(); //今天是哪天
					return {
						year,
						month,
						days,
						week,
						currentDay
					}
				}
				init()
			})();
		</script>
	</body>
</html>

fastrack_0706

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS随手小日历

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .calendar-wrapper { width: 500px; height: 550px; background-color: antiquewhite; margin: 100px.
复制链接

扫一扫