網頁前端介面設計

第一步: 做兩個可以打開關掉彈跳視窗的函式，並且套用在兩個按鈕上。 程式碼: 結果: 第二步: 做一個函式來控制打勾和打勾前先消除上一個打勾的圖示，並在每個顏色圖示中呼叫。 程式碼: 結果:

第一步: 背景改成透明黑的背景，接著加上彈出視窗的標題字。 程式碼: 第二步: 加上彈跳視窗的背景白色和CSS格式設定。 程式碼: 第三步: 加上按鈕和打勾。 程式碼: 最後完成結果:

第一步: 今天的日期是呈現灰色格，所以要確認年份跟月份才可以將灰色背景套用。 程式碼: 第二步: 接下來是將前後不屬於這個月份的 日期填上藍色，下個月要 填上藍色 的時候要先清除不然會殘留上個月的藍色格子。 程式碼: 第三步: 套用框線css設定，讓月曆更為美觀。 CSS程式碼: 套用前: 套用後:

第一步: 首先先解決一月會出現的bug，意思是12月過後的明年1月上的12月的日期會不見。 程式碼: 第二步: 將填月份上日期的程式分到另一個函式裡，並在原本的函式呼叫他。 程式碼: 第三步: 擷取右欄月曆上的年份跟月份，讓 年份跟月份可以隨正確的日期改變。 程式碼: 第四步: 設定兩個函式讓月曆右欄上的箭頭可以切換上下月的動作，還有一個函式是鍵盤上的左右鍵也可以切換上下月。 程式碼: 結果:以下是四、五、六月的切換結果。