东南大学课表样式调整补丁
为什么写这个脚本
作为一名东南大学的学生，我想你一定用过那个愚蠢的网页版“我的课表”。
东大信息化上的课表证明了他们（金智教育股份有限公司）明明有能力按节数显示课程，却非要把课程堆在一块；明明可以做每节课的起止时间，却没有添加；虽然做了打印功能，但我想没有人会真的使用这个功能，因为打印的页面不仅没有页边距，而且常常出格到第二页，课程信息也混在一起，谁用谁知道。至于下载图片的功能，勉强有点用，但结合了之前课程堆在一块的设计，用处聊胜于无。
我对页面做的修改
对于学期课表页面
- 一张课表首先得是一张表格，而原先的页面布局把当日的所有课程堆在表格的第一行，看起来很不直观。因此，我编写了函数，把课程按节数放到合适的位置，并顺便移除了形如“2-3节”的信息。
- 学期课表上确实有必要显示上课周数，上课地点，教学班班号等信息，但上课星期数纯属多余，因此我移除了这一部分。
- 为了使课表信息更加紧凑，我用英文的逗号和括号替换了原来的符号
- 我让色块占满每一格，并使用了flex布局，以保证课程信息垂直居中。
- 我修改了打印区域的布局，使打印时页面四周有足够的空间。（不推荐打印学期课表，因为页面信息太多，大概率会涨到2页，暂时没有合适的解决办法）
对于周课表页面
- 我参考东大信息化上的课表格式，在左侧添加了上课时间栏目。
- 我隐藏了原先的标题（这个标题是空的，当打印时填充数据，我没有办法修改打印的函数，但我可以把它替换为新的标题）在新的标题中，我添加了当前周数的显示，这样，你可以打印每一周的课表，效果类似东大信息化上的课表。
- 调整了打印区域的布局，使表格打印时页面四周有足够的空间。
一些其他用途
如果你查看我的代码，你会发现我把所有的课程信息存入了一个一个json数组。如果你想导出这个json文件，你可以在合适的位置添加这个函数：
function generateJson(courseTable) {
// 将CourseTable对象转换为JSON字符串
let jsonStr = JSON.stringify(courseTable);
// 创建Blob对象
let blob = new Blob([jsonStr], { type: "application/json" });
// 创建下载链接
let url = URL.createObjectURL(blob);
// 创建下载链接的a标签并模拟点击
let a = document.createElement("a");
a.href = url;
a.download = "课表生成.json";
a.click();
// 释放资源
URL.revokeObjectURL(url);
}
这个函数可以作为一个下载按钮的触发函数，你可能需要在页面合适的位置添加一个按钮，当然，你也可以把这个函数绑定到页面上现有的元素上。我更推荐前一种。如果你需要这个功能，联系我，或者等待后续更新。可以预告的是，以我目前的能力，我可以在原有的“打印”“下载”按钮右侧添加两个按钮，分别是导出为json和导出为excel，后续我有可能会更新这个功能。
*以下是按钮的html示例，如果你有能力，可以在合适的位置添加这段html代码：
<button class="btn" onclick="generateJson()">导出Json</button>
- 如果你想用我的代码整活，比如往教务处的课表栏插入奇奇怪怪的东西作为行为艺术，这当然是可以实现的。以下是一个代码示范，通过这一段代码，你可以把本地的json格式的文件上传到网页中。
<input type="file" id="file-input" onchange="inputFile()">
<button class="btn" onclick="importFile()">导入Json</button>
// 获取被隐藏的真正的上传文件按钮
const fileInput = document.getElementById("file-input");
// 通过虚假的上传按钮模拟点击操作
function importFile() {
fileInput.click();
}
// 当真正的上传文件按钮内容变化时，读取文件内容并显示到页面上
function inputFile() {
const file = fileInput.files[0];
const reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = function(e) {
const contents = e.target.result;
courseTable = JSON.parse(contents);
console.log(courseTable); // 打印读取后的courseTable对象
showSemesterTable();
showWeekTable();
fileInput.value = '';
};
}
总结
希望能帮到大家！
