学生课程表的制作

最新推荐文章于 2023-04-20 08:35:14 发布

weixin_zsh

最新推荐文章于 2023-04-20 08:35:14 发布

阅读量2.8k

点赞数 2

分类专栏：前端文章标签：学生课表日期转换

本文链接：https://blog.csdn.net/weixin_41863239/article/details/81069634

版权

本文介绍了一个前端项目中实现学生课程表功能的过程。主要挑战在于计算当前日期相对于开学日期所处的周次。通过JavaScript，实现了从开学日期到当前日期的周次计算，涉及时间转换和日期操作。利用HTML、CSS和JS创建了Bootstrap表格展示课表，并介绍了关键的js方法，包括获取日期距离1970年的毫秒数以及毫秒数转日期格式等。

摘要由CSDN通过智能技术生成

这段时间做的项目里需要实现学生课程表的功能，要求是后台给提供方法，前台通过传递学生的学号和周次来获取方法里的数据，也就是说前台要根据当前时间来判断当前属于该学期的第几周，然后将周次当做参数传递到后台通过ajax获得一周的课表信息。

由于本人是前端菜鸟，所以这个功能的难点在我这里就是如何根据当前时间和开学的日期将当前所属的周次给计算出来！js写了一整天才将在这个功能实现，感觉自己写的很繁琐，不过还是粘出来看看，免得以后会用到。

html部分，我是用的bootstrap的表格实现的，如下：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0;" name="viewport" />
		<title>课表查询</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/kbcx.css"/>
	</head>
	<body>
	<div class="container">
		<div class="row xq">
			<div class="col-xs-2 text-center prevarrow">
				<img src="image/left-jiant.png" alt="" class="left-arrow" />
			</div>
			<div class="col-xs-8">
				<div class="text-center"><span class="dqxq"></span> 第<span class="dqzc"></span>周</div>
			</div>
			<div class="col-xs-2 text-center nextarrow">
				<img src="image/right-white.png" class="left-arrow"/>
			</div>
		</div>
	</div>
	<table class="table table-bordered kb_top">
		<thead>
			<tr class="tb_title">
				<th class="text-center"><span class="mon">1</span>月</th>
				<th class="text-center"><span class="getDate0">14</span>一</th>
				<th class="text-center"><span class="getDate1">15</span>二</th>
				<th class="text-center"><span class="getDate2">16</span>三</th>
				<th class="text-center"><span class="getDate3">17</span>四</th>
				<th class="text-center"><span class="getDate4">18</span>五</th>
				<th class="text-center"><span class="getDate5">19</span>六</th>
				<th class="text-center"><span class="getDate6">20</span>日</th>
			</tr>
		</thead>

		<tbody>
			<tr class="text-center" lang="1">
				<td><div class="tt">1</div></td>
					<td>
						<div class="tt">
								<div>
									<p id="kcm">
										<span class="ver_middle">
											
										</span>
									</p>
								<p id="kcjs"></p>
							</div>
						</div>
						<div class="tt_1"></div>			
				</td>
				<td>
					<div class="tt">
						<div>
							<p id="kcm">
								<span class="ver_middle">
									
								</span>
							</p>
							<p id="kcjs"></p>
						</div>
					</div>
                    <div class="tt_1"></div>
				</td>
				<td>
					<div class="tt">
						<div>
							<p id="kcm">
								<span class="ver_middle">
									
								</span>
							</p>
							<p id="kcjs"></p>
						</div>
					</div><div class="tt_1"></div>
				</td>
				<td>
					<div class="tt">
						<div>
							<p id="kcm">
								<span class="ver_middle">
									
								</span>
							</p>
							<p id="kcjs"></p>
						</div>
					</div><div class="tt_1"></div>
				</td>
				<td>
					<div class="tt">
						<div>
							<p id="kcm">
								<span class="ver_middle">
									
								</span>
							</p>
							<p id="kcjs"></p>
						</div>
					</div><div class="tt_1"></div>
				</td>
				<td>
					<div class="tt">
						<div>
							<p id="kcm">
								<span class="ver_middle">
									
								</span>
							</p>
							<p id="kcjs"></p>
						</div>
					</div><div class="tt_1"></div>
				</td>
				<td>
					<div class="tt">
						<div>
							<p id="kcm">
								<span class="ver_middle">
									
								</span>
							</p>
							<p id="kcjs"></p>
						</div>
					</div><div class="tt_1"></div>
				</td>
			</tr>
			<tr class="text-center" lang="2">
				<td><div class="tt">2</div></td>
				<td>
					<div class="tt">
						<div>
							<p id="kcm">
								<span class="ver_middle">
									
								</span>
							</p>
							<p id="kcjs"></p>
						</div>
					</div><div class="tt_1"></div>
				</td>
				<td>
					<div class="tt">
						<div>
							<p id="kcm">
								<span class="ver_middle">
									
								</span>
							</p>
							<p id="kcjs"></p>
						</div>
					</div><div class="tt_1"></div>
				</td>
				<td>
					<div class="tt">
						<div>
							<p id="kcm">
								<span class="ver_middle">
									
								</span>
							</p>
							<p id="kcjs"></p>
						</div>
					</div><div class="tt_1"></div>
				</td>
				<td>
					<div class="tt">
						<div>
							<p id="kcm">
								<span class="ver_middle">
									
								</span>
							</p>
							<p id="kcjs"></p>
						</div>
					</div><div class="tt_1"></div>
				</td>
				<td>
					<div class="tt">
						<div>
							<p id="kcm">
								<span class="ver_middle">
									
								</span>
							</p>
							<p id="kcjs"></p>
						</div>
					</div><div class="tt_1"></div>
				</td>
				<td>
					<div class