最近的一個小練習。新的學期開始了，老闆讓我給每位老師做個時間表展示他們的office hour和課程安排，我先用AI手動做了二十多張時間表用於印刷。出於好奇和對偷懶的探索，週末我又用CSS網格佈局弄了一個網頁，最後弄出來長這樣。

下面開始回憶製作過程。

主要原理是畫出網格，計算出每個時間對應的網格進行上色。

網格是這樣設計的：縱向10分鐘1格，從早上8點到晚上21點就是13*6格，橫向一個工作日1格，共5格，再加上橫縱標識各1格，所以用sublime text的emmet外掛生成79*6個div，命名為"item+序號"。

時間段對應格子的計算以週三的8:30-8:40為例，該格位於第4列，第(8-8)*6+(40-0)/10+1行，對應div"item28"。週三8:30-10:00時間段在網格中對應的就是8:30-8:40到9:50-10:00的，item序號相差6的，一系列格子。

點選帶有一位老師名字的按鈕觸發的事項就是：1.清空內容；2.從資料中取老師的辦公室、郵箱資訊，修改表頭；3.遍歷每行事項資料，將對應事項上色顯示文字。

為了方便傳播，最後把csv裡的資料作為常量寫進js，把css和js嵌入html整合成一個檔案，畢竟整體都很簡單也免得掛伺服器了。