網頁前端介面設計

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

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

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

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

第一步: 日曆上的日期根據月份正確的顯示出來，使用閏年的判斷式和迴圈。 程式碼: 套用程式後: 第二步: 接著將上個月的和下個月的日期正確的顯示出來，也是使用迴圈。 程式碼: 套用程式後:

第一步: 使用函式將原本數字顯示改成英文顯示，有星期的還有月份的。 程式碼: 也可使用陣列: 這是之前的結果: 套用函式程式後: 第二步: 將原本14號利用函式改成日期的縮寫，像是3號是這個月的第三天所以是 third， 所以個位數是3的就是rd結尾，為了能讓 縮寫小一點所以設定大小為50% 。 程式碼: 套用函式程式後: 第三步: 接著把取得年份跟日期的程式碼都包裝成一個函式，然後呼叫結果是跟之前一樣的。 程式碼: 第四步: 再把所有script裡的函式都丟到js資料夾裡updateDateinfo.js的檔案中，再使用script連結，原本的html檔就可以呼叫 updateDateinfo.js的檔案中的函式，這樣會使維護程式更容易，結果是一樣的。 程式碼: