【前端小实战】jQuery 实现万年历

最新推荐文章于 2024-04-15 09:31:50 发布

Fetters04

最新推荐文章于 2024-04-15 09:31:50 发布

阅读量635

点赞数 1

文章标签：前端 jquery javascript css

本文链接：https://blog.csdn.net/qq_53569667/article/details/128748418

版权

文章目录

一、效果展示
二、完整代码

一、效果展示

在这里插入图片描述

二、完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			body {
				margin: 0;
			}
			
			#box {
				width: 600px;
				border: 1px solid blue;
				margin: 50px auto;
			}
			
			/* 设置顶部样式 */
			.header {
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: #17a;
				color: #fff;
				padding: 0 10px;	/* 与左右边界保持距离 */
			}
			
			.header span {
				cursor: pointer;
			}
			
			.header .fl {
				float: left;
				margin-left: 10px;
			}
			
			.header .fr {
				float: right;
				margin-right: 10px;
			}
			
			.header div {
				font-size: 30px;
			}
			
			/* 设置表格样式 */
			 table {
				border-right: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
			}
			
			table th, table td {		/* 给单元格设置表格线 */
				border-left: 1px solid #ccc;
				border-top: 1px solid #ccc;
				text-align: center;
				height: 30px;
			}
		</style>
	</head>
	<body>
		<div id="box">
		<!--
			// 顶部
			<div class="header">
				<span class="fl">上个月</span>
				<span class="fr">下个月</span>
				<div>2023年6月</div>
			</div>

			// 表格填满 div, 设置单元格之间的间隔为 0, 单元格内的padding为 0
			<table width="100%" cellspacing="0" cellpadding="">
				// 表头
				<thead>
					<tr>
						<th>周日</th>
						<th>周一</th>
						<th>周二</th>
						<th>周三</th>
						<th>周四</th>
						<th>周五</th>
						<th>周六</th>
					</tr>
				</thead>
				
				<tbody>
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
					</tr>
					
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
					</tr>
					
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
					</tr>
					
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
					</tr>
					
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
					</tr>
					
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
					</tr>
				</tbody>
				
			</table>
		-->
		</div>
	</body>
	
	<script src="jquery-3.6.3.js"></script>
	<script>
		$(function() {
			// 定义好要用到的变量
			var now_year = new Date().getFullYear();
			var now_month = new Date().getMonth()
			var defaultDate = new Date(now_year, now_month); // 默认日期为当前年月
			var box = $("#box");
			var yearMonthTitle = null;	// 标题
			var preMonthSpan = null;	// 上个月
			var nextMonthSpan = null;	// 下个月
			var preYearSpan = null;		// 上一年
			var nextYearSpan = null;	// 下一年
			var tBody = null; 			// 表格体
			var allTd = [];				// 所有的单元格
			
			// 创建静态布局
			create();
			
			// 显示日期
			showDate();
			
			function create() {
				// 创建顶部的标签, 加入到box中
				var header = $(`
				<div class="header">
					<span class="fl">上一年</span>
					<span class="fr">下一年</span>
					<span class="fl">上个月</span>
					<span class="fr">下个月</span>
					<div>2023年1月</div>
				</div>
				`);
				box.append(header);
				
				// 找到对应的对象
				yearMonthTitle = header.find('div');
				preMonthSpan = header.find('.fl');
				nextMonthSpan = header.find('.fr');
				
				var table = $(`
				<table width="100%" cellspacing="0" cellpadding="">
					<thead>
						<tr>
							<th>周日</th>
							<th>周一</th>
							<th>周二</th>
							<th>周三</th>
							<th>周四</th>
							<th>周五</th>
							<th>周六</th>
						</tr>
					</thead>
					
					<tbody>
					</tbody>
				</table>
				`);
				box.append(table);
				
				// 找到 tbody 元素
				tBody = box.find('tbody');
				// 每行加入7个单元格，共6行
				for (var i = 0; i < 6; i++) {
					var tr = $(`<tr></tr>`);
					for (var j = 0; j < 7; j++) {
						var td = $(`<td></td>`);
						
						// 将 td 放入 tr 中
						tr.append(td);
						
						//记录每个单元格
						allTd.push(td);	
					}
					
					// 再将 tr 放入 tbody
					tBody.append(tr);
				}
			}
			
			function showDate() {
				// 获取默认日期的年月
				var year = defaultDate.getFullYear();
				var month = defaultDate.getMonth() + 1;
				
				yearMonthTitle.text(year + "年" + month + "月");
				
				// 获取默认年月的1号是星期几
				var week = new Date(year, month-1, 1).getDay();
				// 获取当前月最后一天的日期, 即可知道该月有多少天
				var days = new Date(year, month, 0).getDate();
				
				// 在单元格中填写对应日期
				var day = 1;
				// 遍历一遍全部单元格
				for (var i = 0; i < allTd.length; i++) {
					// 在下一次存放日期前先清除对应单元格
					allTd[i].empty();
					// 存放日期
					if (i >= week && day <= days)
						allTd[i].text(day++);
				}
				
				// 清除没有日期的行，最少4行，最多6行
				// 有时候可能会出现第5行或第6行多余的情况
				if (allTd[28].text() == '') {
					// 当第5行第1个单元格没有日期时,说明整行为空
					// 就将第5行和第6行隐藏起来
					allTd[28].parent().hide();	//allTd[28]的同一行元素
					allTd[35].parent().hide();	//allTd[35]的同一行元素
				} else if (allTd[35].text() == '') {
					// 同理
					allTd[35].parent().hide();
				} else {
					// 当有元素时对应行则要展示出来
					allTd[28].parent().show();
					allTd[35].parent().show();
				}
				
			}
			
			// 点击事件,改变年份或月份
			$('#box span').click(function() {
				// 获取默认日期的年月
				var year = defaultDate.getFullYear();
				var month = defaultDate.getMonth() + 1;
				
				// 修改日期
				if ($(this).index() == 0) {
					year--;
				} else if ($(this).index() == 1) {
					year++;
				} else if ($(this).index() == 2) {
					month--;
				} else {
					month++;
				}
				// 将新日期作为默认日期
				defaultDate = new Date(year, month-1);
				showDate();
			})
		})
		
		
	</script>
</html>