东南大学课表样式调整

修改了原东南大学办事大厅“我的课表”的一些愚蠢设计。注意，目前本脚本仅在tampermonkey上测试过，且仅针对本人课表做了优化，保证打印时不会超出页面。如果在您的浏览器中出现周课表横屏打印页面超出，请适当调整代码第383行function printTitle()内的margin-top属性（该属性控制标题离页面顶部的距离），或者，选择竖屏格式打印。如果你有更好的解决方法，欢迎联系我！（联系方式见文档底部）

安装此脚本？

提问、发表评价或者举报此脚本。

作者

julymiaw

日安装量

总安装量

评分

0 0 0

版本

1.0.4

创建于

2023-09-21

更新于

2024-09-16

大小

17.2 KB

许可证

MIT

适用于

seu.edu.cn

东南大学课表样式调整补丁

为什么写这个脚本

作为一名东南大学的学生，我想你一定用过那个愚蠢的网页版“我的课表”。

东大信息化上的课表证明了他们（金智教育股份有限公司）明明有能力按节数显示课程，却非要把课程堆在一块；明明可以做每节课的起止时间，却没有添加；虽然做了打印功能，但我想没有人会真的使用这个功能，因为打印的页面不仅没有页边距，而且常常出格到第二页，课程信息也混在一起，谁用谁知道。至于下载图片的功能，勉强有点用，但结合了之前课程堆在一块的设计，用处聊胜于无。

我对页面做的修改

对于学期课表页面

一张课表首先得是一张表格，而原先的页面布局把当日的所有课程堆在表格的第一行，看起来很不直观。因此，我编写了函数，把课程按节数放到合适的位置，并顺便移除了形如“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 = '';
  };
}

总结

希望能帮到大家！